@cardenelabs/cdl 0.73.0 → 0.75.0

package/dist/react.js

@@ -2870,6 +2870,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;
@@ -3050,7 +3110,38 @@ function fitArt(region, extent, art) {
   const dx = region.cx - s * \u7D75cx;
   const dy = region.cy - s * \u7D75cy;
   if (s >= 1 && dx === 0 && dy === 0) return \u7D44\u3080(1);
-  return /* @__PURE__ */ jsx("g", { transform: `translate(${dx} ${dy}) scale(${s})`, children: \u7D44\u3080(s) });
+  return (
+    /*
+     * 包みに印を付ける (#886)。 **`scale(` を持つ変換は他にもある** = `event` は目立たせる
+     * ための脈動を `scale(0.78)` から `scale(1)` で描き、絵を箱に収める縮小ではない。
+     * 祖先の変換を正規表現で見る形だと、その脈動まで「絵の縮小」 として数える。
+     */
+    /* @__PURE__ */ 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
@@ -9605,66 +9696,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;
@@ -17309,15 +17340,6 @@ 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 \u5E2F\u306B\u5BFE\u3059\u308B\u4E0A\u9650 = 0.8;
-function \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(k) {
-  const \u623B\u3057 = Number.isFinite(k) && k > 0 ? 1 / k : 1;
-  const \u4E0A\u9650 = Math.min(
-    \u884C\u306E\u9593\u9694 * \u5E2F\u306B\u5BFE\u3059\u308B\u4E0A\u9650 / \u5024\u306E\u5B57,
-    \u898B\u51FA\u3057\u306E\u5E2F * \u5E2F\u306B\u5BFE\u3059\u308B\u4E0A\u9650 / \u898B\u51FA\u3057\u306E\u5B57
-  );
-  return Math.max(1, Math.min(\u623B\u3057, \u4E0A\u9650));
-}
 var BLOCK_SHADOW = 6;
 var NFT_W = 220;
 var NFT_H = 240;
@@ -17328,6 +17350,15 @@ var CHAIN_BLOCK_H = 66;
 var CHAIN_LINK_W = 12;
 var CHAIN_SHADOW = 3;
 var CHAIN_BLOCK_SW = 2.5;
+var CHAIN_HEAD_H = 16;
+var CHAIN_TEXT_W = CHAIN_BLOCK_W - 8;
+var CHAIN_ROW_GAP = 14;
+var CHAIN_NO_SIZE = 10;
+var CONTRACT_CALL_SIZE = 11;
+var NFT_ID_SIZE = 15;
+var CHAIN_HASH_SIZE = 7;
+var BTC_NO_SIZE = 9;
+var ETH_NO_SIZE = 9;
 var NODE_HEX_R = 44;
 var NODE_PEER_R = 12;
 var NODE_PEER_GAP = 22;
@@ -17441,30 +17472,40 @@ function ShapeSmartContractNode({ node, active, lang }) {
     gearPts.push(`${gearCx + Math.cos(a3) * gearTipR},${gearCy + Math.sin(a3) * gearTipR}`);
     gearPts.push(`${gearCx + Math.cos(a4) * gearBodyR},${gearCy + Math.sin(a4) * gearBodyR}`);
   }
-  const art = /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("path", { "data-cdl-role": "node-body", d: path, ...frame, strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx("path", { d: foldPath, fill: "none", stroke: frame.stroke, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
-    [y + 40, y + 58, y + 76, y + 94].map((ly, i) => /* @__PURE__ */ jsx("rect", { x: x + 16, y: ly - 3, width: docW - 32 - i * 22, height: 5, rx: 1, fill: "var(--cdl-divider, #d4d4d8)", fillOpacity: 0.7, stroke: "none" }, i)),
-    /* @__PURE__ */ jsx("text", { x: x + 16, y: y + docH - 46, fontSize: 11, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u5B57\u5F15("smartContract.call") }),
-    /* @__PURE__ */ jsx(
-      "polygon",
-      {
-        points: gearPts.join(" "),
-        fill: "var(--cdl-tone-accent, #2d6a8f)",
-        stroke: frame.stroke,
-        strokeWidth: 1.2,
-        strokeLinejoin: "round",
-        children: /* @__PURE__ */ jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${gearCx} ${gearCy}`, to: `360 ${gearCx} ${gearCy}`, dur: "8s", repeatCount: "indefinite" })
-      }
-    ),
-    /* @__PURE__ */ jsx("circle", { cx: gearCx, cy: gearCy, r: gearBodyR * 0.4, fill: "var(--cdl-node-fill, #ffffff)", stroke: "none" })
-  ] });
+  const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
+    {
+      text: \u5B57\u5F15("smartContract.call"),
+      size: CONTRACT_CALL_SIZE,
+      \u5E2F: { \u5E45: docW - 32, \u9AD8\u3055: 18 }
+    }
+  ];
+  const art = (\u500D\u7387) => {
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("path", { "data-cdl-role": "node-body", d: path, ...frame, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("path", { d: foldPath, fill: "none", stroke: frame.stroke, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
+      [y + 40, y + 58, y + 76, y + 94].map((ly, i) => /* @__PURE__ */ jsx("rect", { x: x + 16, y: ly - 3, width: docW - 32 - i * 22, height: 5, rx: 1, fill: "var(--cdl-divider, #d4d4d8)", fillOpacity: 0.7, stroke: "none" }, i)),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: x + 16, y: y + docH - 46, fontSize: CONTRACT_CALL_SIZE * \u500D, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u5B57\u5F15("smartContract.call") }),
+      /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: gearPts.join(" "),
+          fill: "var(--cdl-tone-accent, #2d6a8f)",
+          stroke: frame.stroke,
+          strokeWidth: 1.2,
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${gearCx} ${gearCy}`, to: `360 ${gearCx} ${gearCy}`, dur: "8s", repeatCount: "indefinite" })
+        }
+      ),
+      /* @__PURE__ */ jsx("circle", { cx: gearCx, cy: gearCy, r: gearBodyR * 0.4, fill: "var(--cdl-node-fill, #ffffff)", stroke: "none" })
+    ] });
+  };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, smartContractExtent(frame.strokeWidth), art),
     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..." } },
@@ -17493,8 +17534,19 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
     };
   });
   const \u898B\u51FA\u3057\u306E\u5E45 = bw - 14 - 30;
+  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);
+    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;
@@ -17502,11 +17554,11 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       /* @__PURE__ */ jsx("rect", { x: x + 6, y: y + 6, width: bw, height: bh, rx: 8, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 8, ...frame }),
       /* @__PURE__ */ 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__ */ jsx("text", { "data-cdl-role": "blockchain-block-title", 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__ */ 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__ */ jsx("circle", { cx: x + bw - 16, cy: y + 16, r: 5.5, fill: "#7cd88f", stroke: "#ffffff", strokeWidth: 1.5 }),
       fields.map((f, i) => /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx("text", { 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__ */ jsx("text", { "data-cdl-role": `blockchain-block-${f.key}`, 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__ */ 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__ */ 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__ */ 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__ */ jsxs("g", { transform: `translate(${cx - 32}, ${y + bh - 26})`, children: [
@@ -17529,38 +17581,45 @@ function ShapeBlockchainNode({ node, active }) {
   const linkW = CHAIN_LINK_W;
   const totalW = blockCount * blockW + (blockCount - 1) * linkW;
   const startX = cx - totalW / 2;
-  const art = /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
-    const bx = startX + i * (blockW + linkW);
-    const isCurrent = i === blockCount - 1;
-    return /* @__PURE__ */ jsxs("g", { children: [
-      i > 0 && /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx("line", { x1: bx - linkW, y1: cy, x2: bx, y2: cy, stroke: frame.stroke, strokeWidth: 3, strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx("circle", { cx: bx - linkW / 2, cy, r: 2.5, fill: "var(--cdl-tone-accent, #2d6a8f)", stroke: "none", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.3;1;0.3", dur: `${1 + i * 0.2}s`, repeatCount: "indefinite" }) })
-      ] }),
-      /* @__PURE__ */ jsx("rect", { x: bx + 3, y: cy - blockH / 2 + 3, width: blockW, height: blockH, rx: 4, fill: frame.stroke, opacity: 0.18, stroke: "none" }),
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          "data-cdl-role": i === 0 ? "node-body" : void 0,
-          x: bx,
-          y: cy - blockH / 2,
-          width: blockW,
-          height: blockH,
-          rx: 4,
-          fill: isCurrent ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-node-fill, #ffffff)",
-          stroke: frame.stroke,
-          strokeWidth: isCurrent ? 2.5 : 1.5
-        }
-      ),
-      /* @__PURE__ */ jsx("rect", { x: bx, y: cy - blockH / 2, width: blockW, height: 16, rx: 4, fill: isCurrent ? "#1a4a68" : "var(--cdl-divider, #d4d4d8)", fillOpacity: isCurrent ? 1 : 0.4, stroke: "none" }),
-      /* @__PURE__ */ jsxs("text", { x: bx + blockW / 2, y: cy - blockH / 2 + 12, fontSize: 10, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", children: [
-        "#",
-        420 + i
-      ] }),
-      /* @__PURE__ */ jsx("text", { x: bx + blockW / 2, y: cy + 8, fontSize: 14, fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-tone-accent, #2d6a8f)", fontFamily: "Georgia, serif", children: "#" }),
-      /* @__PURE__ */ jsx("text", { x: bx + blockW / 2, y: cy + 22, fontSize: 7, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", opacity: 0.9, children: "0x\u2026" })
-    ] }, i);
-  }) });
+  const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
+    { text: "#420", size: CHAIN_NO_SIZE, \u5E2F: { \u5E45: CHAIN_TEXT_W, \u9AD8\u3055: CHAIN_HEAD_H } },
+    { text: "0x\u2026", size: CHAIN_HASH_SIZE, \u5E2F: { \u5E45: CHAIN_TEXT_W, \u9AD8\u3055: CHAIN_ROW_GAP } }
+  ];
+  const art = (\u500D\u7387) => {
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    return /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
+      const bx = startX + i * (blockW + linkW);
+      const isCurrent = i === blockCount - 1;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        i > 0 && /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("line", { x1: bx - linkW, y1: cy, x2: bx, y2: cy, stroke: frame.stroke, strokeWidth: 3, strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx("circle", { cx: bx - linkW / 2, cy, r: 2.5, fill: "var(--cdl-tone-accent, #2d6a8f)", stroke: "none", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.3;1;0.3", dur: `${1 + i * 0.2}s`, repeatCount: "indefinite" }) })
+        ] }),
+        /* @__PURE__ */ jsx("rect", { x: bx + 3, y: cy - blockH / 2 + 3, width: blockW, height: blockH, rx: 4, fill: frame.stroke, opacity: 0.18, stroke: "none" }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            "data-cdl-role": i === 0 ? "node-body" : void 0,
+            x: bx,
+            y: cy - blockH / 2,
+            width: blockW,
+            height: blockH,
+            rx: 4,
+            fill: isCurrent ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-node-fill, #ffffff)",
+            stroke: frame.stroke,
+            strokeWidth: isCurrent ? 2.5 : 1.5
+          }
+        ),
+        /* @__PURE__ */ jsx("rect", { x: bx, y: cy - blockH / 2, width: blockW, height: CHAIN_HEAD_H, rx: 4, fill: isCurrent ? "#1a4a68" : "var(--cdl-divider, #d4d4d8)", fillOpacity: isCurrent ? 1 : 0.4, stroke: "none" }),
+        /* @__PURE__ */ jsxs("text", { "data-cdl-counter-scaled": "1", x: bx + blockW / 2, y: cy - blockH / 2 + 12, fontSize: CHAIN_NO_SIZE * \u500D, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", children: [
+          "#",
+          420 + i
+        ] }),
+        /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: bx + blockW / 2, y: cy + 8, fontSize: 14, fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-tone-accent, #2d6a8f)", fontFamily: "Georgia, serif", children: "#" }),
+        /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: bx + blockW / 2, y: cy + 22, fontSize: CHAIN_HASH_SIZE * \u500D, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", opacity: 0.9, children: "0x\u2026" })
+      ] }, i);
+    }) });
+  };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, chainExtent(), art),
     bottomLabel2(node, r.cx, r.label)
@@ -17578,33 +17637,39 @@ function ShapeBitcoinChainNode({ node, active }) {
   const linkW = CHAIN_LINK_W;
   const totalW = blockCount * blockW + (blockCount - 1) * linkW;
   const startX = cx - totalW / 2;
-  const art = /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
-    const bx = startX + i * (blockW + linkW);
-    const isCurrent = i === blockCount - 1;
-    return /* @__PURE__ */ jsxs("g", { children: [
-      i > 0 && /* @__PURE__ */ jsx("line", { x1: bx - linkW, y1: cy, x2: bx, y2: cy, stroke: btcOrange, strokeWidth: 3.5, strokeLinecap: "round" }),
-      /* @__PURE__ */ jsx("rect", { x: bx + 3, y: cy - blockH / 2 + 3, width: blockW, height: blockH, rx: 4, fill: frame.stroke, opacity: 0.18, stroke: "none" }),
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          "data-cdl-role": i === 0 ? "node-body" : void 0,
-          x: bx,
-          y: cy - blockH / 2,
-          width: blockW,
-          height: blockH,
-          rx: 4,
-          fill: isCurrent ? btcOrange : "var(--cdl-node-fill, #ffffff)",
-          stroke: btcOrange,
-          strokeWidth: isCurrent ? 2.5 : 1.5
-        }
-      ),
-      /* @__PURE__ */ jsx("text", { x: bx + blockW / 2, y: cy - 4, fontSize: 30, fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : btcOrange, fontFamily: "Georgia, serif", children: "\u20BF" }),
-      /* @__PURE__ */ jsxs("text", { x: bx + blockW / 2, y: cy + 16, fontSize: 9, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", children: [
-        "#",
-        820 + i
-      ] })
-    ] }, i);
-  }) });
+  const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
+    { text: "#820", size: BTC_NO_SIZE, \u5E2F: { \u5E45: CHAIN_TEXT_W, \u9AD8\u3055: 20 } }
+  ];
+  const art = (\u500D\u7387) => {
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    return /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
+      const bx = startX + i * (blockW + linkW);
+      const isCurrent = i === blockCount - 1;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        i > 0 && /* @__PURE__ */ jsx("line", { x1: bx - linkW, y1: cy, x2: bx, y2: cy, stroke: btcOrange, strokeWidth: 3.5, strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("rect", { x: bx + 3, y: cy - blockH / 2 + 3, width: blockW, height: blockH, rx: 4, fill: frame.stroke, opacity: 0.18, stroke: "none" }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            "data-cdl-role": i === 0 ? "node-body" : void 0,
+            x: bx,
+            y: cy - blockH / 2,
+            width: blockW,
+            height: blockH,
+            rx: 4,
+            fill: isCurrent ? btcOrange : "var(--cdl-node-fill, #ffffff)",
+            stroke: btcOrange,
+            strokeWidth: isCurrent ? 2.5 : 1.5
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: bx + blockW / 2, y: cy - 4, fontSize: 30, fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : btcOrange, fontFamily: "Georgia, serif", children: "\u20BF" }),
+        /* @__PURE__ */ jsxs("text", { "data-cdl-counter-scaled": "1", x: bx + blockW / 2, y: cy + 16, fontSize: BTC_NO_SIZE * \u500D, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", children: [
+          "#",
+          820 + i
+        ] })
+      ] }, i);
+    }) });
+  };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, chainExtent(), art),
     bottomLabel2(node, r.cx, r.label)
@@ -17644,7 +17709,7 @@ function ShapeEthereumChainNode({ node, active }) {
         }
       ),
       /* @__PURE__ */ jsx(EthereumDiamond, { cx: bx + blockW / 2, cy: cy - 6, h: 16, colors: iconColors }),
-      /* @__PURE__ */ jsxs("text", { x: bx + blockW / 2, y: cy + 22, fontSize: 9, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", children: [
+      /* @__PURE__ */ jsxs("text", { "data-cdl-counter-scaled": "0", x: bx + blockW / 2, y: cy + 22, fontSize: ETH_NO_SIZE, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", children: [
         "#",
         21400 + i
       ] })
@@ -17823,39 +17888,46 @@ function ShapeNftNode({ node, active }) {
   const artH = cardH * 0.72;
   const artCx = x + cardW / 2;
   const artCy = y + artH / 2;
-  const art = /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("rect", { x: x + 4, y: y + 4, width: cardW, height: cardH, rx: 14, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
-    /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: cardW, height: cardH, rx: 14, ...frame }),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: `M ${x} ${y + artH} L ${x} ${y + 14} Q ${x} ${y}, ${x + 14} ${y} L ${x + cardW - 14} ${y} Q ${x + cardW} ${y}, ${x + cardW} ${y + 14} L ${x + cardW} ${y + artH} Z`,
-        fill: "var(--cdl-tone-accent, #2d6a8f)",
-        fillOpacity: 0.15,
-        stroke: "none"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: artCx,
-        y: artCy + 24,
-        fontSize: 68,
-        fontWeight: 900,
-        letterSpacing: 4,
-        textAnchor: "middle",
-        fill: "var(--cdl-tone-accent, #2d6a8f)",
-        fontFamily: "Georgia, serif",
-        children: "NFT"
-      }
-    ),
-    /* @__PURE__ */ jsx("line", { x1: x, y1: y + artH, x2: x + cardW, y2: y + artH, stroke: frame.stroke, strokeWidth: 1, opacity: 0.5 }),
-    /* @__PURE__ */ jsx("text", { x: x + 16, y: y + artH + 30, fontSize: 15, fontWeight: 700, fill: "var(--cdl-text, #1a1f2a)", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: "#1024" }),
-    /* @__PURE__ */ jsxs("g", { transform: `translate(${x + cardW - 20}, ${y + artH + 22})`, children: [
-      /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 10, fill: "#27c93f", stroke: "#ffffff", strokeWidth: 2 }),
-      /* @__PURE__ */ jsx("path", { d: "M -4 0 L -1 3 L 4 -3", fill: "none", stroke: "#ffffff", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" })
-    ] })
-  ] });
+  const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
+    { text: "#1024", size: NFT_ID_SIZE, \u5E2F: { \u5E45: cardW - 16 - 34, \u9AD8\u3055: cardH - artH } }
+  ];
+  const art = (\u500D\u7387) => {
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("rect", { x: x + 4, y: y + 4, width: cardW, height: cardH, rx: 14, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
+      /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: cardW, height: cardH, rx: 14, ...frame }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M ${x} ${y + artH} L ${x} ${y + 14} Q ${x} ${y}, ${x + 14} ${y} L ${x + cardW - 14} ${y} Q ${x + cardW} ${y}, ${x + cardW} ${y + 14} L ${x + cardW} ${y + artH} Z`,
+          fill: "var(--cdl-tone-accent, #2d6a8f)",
+          fillOpacity: 0.15,
+          stroke: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          "data-cdl-counter-scaled": "0",
+          x: artCx,
+          y: artCy + 24,
+          fontSize: 68,
+          fontWeight: 900,
+          letterSpacing: 4,
+          textAnchor: "middle",
+          fill: "var(--cdl-tone-accent, #2d6a8f)",
+          fontFamily: "Georgia, serif",
+          children: "NFT"
+        }
+      ),
+      /* @__PURE__ */ jsx("line", { x1: x, y1: y + artH, x2: x + cardW, y2: y + artH, stroke: frame.stroke, strokeWidth: 1, opacity: 0.5 }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: x + 16, y: y + artH + 30, fontSize: NFT_ID_SIZE * \u500D, fontWeight: 700, fill: "var(--cdl-text, #1a1f2a)", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: "#1024" }),
+      /* @__PURE__ */ jsxs("g", { transform: `translate(${x + cardW - 20}, ${y + artH + 22})`, children: [
+        /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 10, fill: "#27c93f", stroke: "#ffffff", strokeWidth: 2 }),
+        /* @__PURE__ */ jsx("path", { d: "M -4 0 L -1 3 L 4 -3", fill: "none", stroke: "#ffffff", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" })
+      ] })
+    ] });
+  };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, nftExtent(frame.strokeWidth), art),
     bottomLabel2(node, r.cx, r.label)
@@ -17984,7 +18056,7 @@ function ShapeBankNode({ node, active }) {
     }),
     /* @__PURE__ */ jsx("path", { d: `M ${x - BANK_BODY_OUT} ${y + pedimentH} L ${r.cx} ${y - BANK_PEDIMENT_RISE} L ${x + bldW + BANK_BODY_OUT} ${y + pedimentH} Z`, fill: "var(--cdl-node-fill, #ffffff)", stroke: frame.stroke, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
     /* @__PURE__ */ jsx("circle", { cx: r.cx, cy: y + pedimentH / 2 + 4, r: 14, fill: "var(--cdl-tone-accent, #2d6a8f)", stroke: frame.stroke, strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsx("text", { x: r.cx, y: y + pedimentH / 2 + 10, fontSize: 18, fontWeight: 700, textAnchor: "middle", fill: "#ffffff", fontFamily: "Georgia, serif", children: "$" }),
+    /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: r.cx, y: y + pedimentH / 2 + 10, fontSize: 18, fontWeight: 700, textAnchor: "middle", fill: "#ffffff", fontFamily: "Georgia, serif", children: "$" }),
     /* @__PURE__ */ jsx("rect", { x: x - 4, y: y + pedimentH, width: bldW + 8, height: architraveH, fill: "var(--cdl-divider, #d4d4d8)", fillOpacity: 0.4, stroke: frame.stroke, strokeWidth: frame.strokeWidth }),
     Array.from({ length: nCols }, (_, i) => i).map((i) => {
       const colCx = x + 12 + colGap + i * (colW + colGap) + colW / 2;
@@ -18050,7 +18122,7 @@ function ShapeTrustBankNode({ node, active, lang }) {
       return /* @__PURE__ */ jsx("rect", { x: r.cx - w / 2, y: y + bldH + i * BANK_STEP_DY, width: w, height: BANK_STEP_H, fill: "var(--cdl-divider, #d4d4d8)", fillOpacity: 0.5 + i * 0.15, stroke: frame.stroke, strokeWidth: BANK_STEP_SW }, i);
     }),
     /* @__PURE__ */ jsx("path", { d: `M ${x - 6} ${y + pedimentH} L ${r.cx} ${y + 2} L ${x + bldW + 6} ${y + pedimentH} Z`, fill: "var(--cdl-node-fill, #ffffff)", stroke: frame.stroke, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx("text", { x: r.cx, y: y + pedimentH - 8, fontSize: 15, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", fontFamily: "Georgia, serif", children: \u5B57\u5F15("trustBank.sign") }),
+    /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: r.cx, y: y + pedimentH - 8, fontSize: 15, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", fontFamily: "Georgia, serif", children: \u5B57\u5F15("trustBank.sign") }),
     /* @__PURE__ */ jsx("rect", { x: x - 4, y: y + pedimentH, width: bldW + 8, height: architraveH, fill: "var(--cdl-divider, #d4d4d8)", fillOpacity: 0.4, stroke: frame.stroke, strokeWidth: frame.strokeWidth }),
     Array.from({ length: nCols }, (_, i) => i).map((i) => {
       const colCx = x + 15 + colGap + i * (colW + colGap) + colW / 2;
@@ -18124,6 +18196,9 @@ function ShapeCreditCardNode({ node, active }) {
 }
 var BROKERAGE_TICK_H = 12;
 var BROKERAGE_LOGO_H = 26;
+var BROKERAGE_TICK_INNER_H = 8;
+var BROKERAGE_TICKER_SIZE = 5.5;
+var BROKERAGE_SIGN_SIZE = 12;
 var BROKERAGE_GRID_TOP = 62;
 var BROKERAGE_CELL_W = 14;
 var BROKERAGE_CELL_H = 18;
@@ -18172,35 +18247,46 @@ function ShapeBrokerageNode({ node, active, lang }) {
   );
   const gridStartX = x + (w - (cols * cellW + (cols - 1) * gapX)) / 2;
   const goldCells = /* @__PURE__ */ new Set([`0,1`, `0,4`, `1,2`, `2,3`, `3,5`]);
-  const \u7D75 = /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("ellipse", { cx, cy: y + h + BROKERAGE_SHADOW_DY, rx: w * BROKERAGE_SHADOW_RX_RATIO, ry: BROKERAGE_SHADOW_RY, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
-    /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: w, height: h, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth }),
-    /* @__PURE__ */ jsx("rect", { x: x - BROKERAGE_SHADE_OUT, y, width: BROKERAGE_SHADE_OUT * 2, height: h, fill: accentDarker }),
-    /* @__PURE__ */ jsx("rect", { x, y, width: w, height: BROKERAGE_TICK_H, fill: "#0f1830", stroke: "none" }),
-    /* @__PURE__ */ jsx("rect", { x: x + 2, y: y + 2, width: w - 4, height: 8, fill: "#1a2340", stroke: "none" }),
-    /* @__PURE__ */ jsx("text", { x: cx, y: y + 9, fontSize: 5.5, fontWeight: 700, textAnchor: "middle", fill: "#4ea36a", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: \u5B57\u5F15("brokerage.ticker") }),
-    /* @__PURE__ */ jsx("rect", { x, y: y + BROKERAGE_TICK_H, width: w, height: BROKERAGE_LOGO_H, fill: "#e5c07b", stroke: "none" }),
-    /* @__PURE__ */ jsx("text", { x: cx, y: y + 30, fontSize: 12, fontWeight: 700, letterSpacing: 2.5, textAnchor: "middle", fill: "#0f1830", children: \u5B57\u5F15("brokerage.sign") }),
-    Array.from({ length: rows }).map(
-      (_, ri) => Array.from({ length: cols }).map((_2, ci) => {
-        const wx = gridStartX + ci * (cellW + gapX);
-        const wy = gridStartY + ri * (cellH + gapY);
-        const isGold = goldCells.has(`${ri},${ci}`);
-        return /* @__PURE__ */ jsx("rect", { x: wx, y: wy, width: cellW, height: cellH, fill: isGold ? "#e5c07b" : accentDarker }, `w${ri}${ci}`);
-      })
-    ),
-    /* @__PURE__ */ jsx("rect", { x, y: y + h - BROKERAGE_BASE_H, width: w, height: 12, fill: accentDarker }),
-    /* @__PURE__ */ jsx("circle", { cx, cy: y + h - 8, r: 12, fill: "#a89d8f", stroke: accentDarker, strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsx("circle", { cx, cy: y + h - 8, r: 9, fill: "#8b949e", stroke: accentDarker, strokeWidth: 1 }),
-    /* @__PURE__ */ jsx("line", { x1: cx - 9, y1: y + h - 8, x2: cx + 9, y2: y + h - 8, stroke: accentDarker, strokeWidth: 0.8 }),
-    /* @__PURE__ */ jsx("line", { x1: cx, y1: y + h - 17, x2: cx, y2: y + h - 1, stroke: accentDarker, strokeWidth: 0.8 }),
-    /* @__PURE__ */ jsx("rect", { x: x - BROKERAGE_FLOOR_OUT, y: y + h + BROKERAGE_FLOOR_DY, width: w + BROKERAGE_FLOOR_OUT * 2, height: BROKERAGE_FLOOR_H, fill: "#5a6270", stroke: "none" })
-  ] });
+  const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
+    {
+      text: \u5B57\u5F15("brokerage.ticker"),
+      size: BROKERAGE_TICKER_SIZE,
+      \u5E2F: { \u5E45: w - 4, \u9AD8\u3055: BROKERAGE_TICK_INNER_H }
+    }
+  ];
+  const \u7D75 = (\u500D\u7387) => {
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("ellipse", { cx, cy: y + h + BROKERAGE_SHADOW_DY, rx: w * BROKERAGE_SHADOW_RX_RATIO, ry: BROKERAGE_SHADOW_RY, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
+      /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: w, height: h, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth }),
+      /* @__PURE__ */ jsx("rect", { x: x - BROKERAGE_SHADE_OUT, y, width: BROKERAGE_SHADE_OUT * 2, height: h, fill: accentDarker }),
+      /* @__PURE__ */ jsx("rect", { x, y, width: w, height: BROKERAGE_TICK_H, fill: "#0f1830", stroke: "none" }),
+      /* @__PURE__ */ jsx("rect", { x: x + 2, y: y + 2, width: w - 4, height: 8, fill: "#1a2340", stroke: "none" }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: cx, y: y + 9, fontSize: BROKERAGE_TICKER_SIZE * \u500D, fontWeight: 700, textAnchor: "middle", fill: "#4ea36a", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: \u5B57\u5F15("brokerage.ticker") }),
+      /* @__PURE__ */ jsx("rect", { x, y: y + BROKERAGE_TICK_H, width: w, height: BROKERAGE_LOGO_H, fill: "#e5c07b", stroke: "none" }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: cx, y: y + 30, fontSize: BROKERAGE_SIGN_SIZE, fontWeight: 700, letterSpacing: 2.5, textAnchor: "middle", fill: "#0f1830", children: \u5B57\u5F15("brokerage.sign") }),
+      Array.from({ length: rows }).map(
+        (_, ri) => Array.from({ length: cols }).map((_2, ci) => {
+          const wx = gridStartX + ci * (cellW + gapX);
+          const wy = gridStartY + ri * (cellH + gapY);
+          const isGold = goldCells.has(`${ri},${ci}`);
+          return /* @__PURE__ */ jsx("rect", { x: wx, y: wy, width: cellW, height: cellH, fill: isGold ? "#e5c07b" : accentDarker }, `w${ri}${ci}`);
+        })
+      ),
+      /* @__PURE__ */ jsx("rect", { x, y: y + h - BROKERAGE_BASE_H, width: w, height: 12, fill: accentDarker }),
+      /* @__PURE__ */ jsx("circle", { cx, cy: y + h - 8, r: 12, fill: "#a89d8f", stroke: accentDarker, strokeWidth: 1.5 }),
+      /* @__PURE__ */ jsx("circle", { cx, cy: y + h - 8, r: 9, fill: "#8b949e", stroke: accentDarker, strokeWidth: 1 }),
+      /* @__PURE__ */ jsx("line", { x1: cx - 9, y1: y + h - 8, x2: cx + 9, y2: y + h - 8, stroke: accentDarker, strokeWidth: 0.8 }),
+      /* @__PURE__ */ jsx("line", { x1: cx, y1: y + h - 17, x2: cx, y2: y + h - 1, stroke: accentDarker, strokeWidth: 0.8 }),
+      /* @__PURE__ */ jsx("rect", { x: x - BROKERAGE_FLOOR_OUT, y: y + h + BROKERAGE_FLOOR_DY, width: w + BROKERAGE_FLOOR_OUT * 2, height: BROKERAGE_FLOOR_H, fill: "#5a6270", stroke: "none" })
+    ] });
+  };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
     bottomLabel3(node, r.cx, r.label)
   ] });
 }
+var EXCHANGE_SUB_SIZE = 8;
 function ShapeExchangeNode({ node, active, lang }) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
@@ -18228,7 +18314,7 @@ function ShapeExchangeNode({ node, active, lang }) {
   const hexPath = hexPoints.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ") + " Z";
   const \u7BC0\u70B9 = Math.max(0, nodeR) + 8 + 1.5 / 2;
   const \u516D\u89D2 = hexR + frame.strokeWidth / 2;
-  const \u5B57\u4E0B = 26 + 8 * 0.25;
+  const \u5B57\u4E0B = 26 + EXCHANGE_SUB_SIZE * 0.25;
   const \u5916 = Math.max(\u7BC0\u70B9, \u516D\u89D2);
   const \u305A\u308C = cy - r.cy;
   const \u5E83\u304C\u308A = {
@@ -18237,21 +18323,27 @@ function ShapeExchangeNode({ node, active, lang }) {
     \u5DE6: \u5916,
     \u53F3: \u5916
   };
-  const \u7D75 = /* @__PURE__ */ jsxs("g", { children: [
-    nodes.map((n, i) => /* @__PURE__ */ jsx("line", { x1: cx, y1: cy, x2: n.cx, y2: n.cy, stroke: accentDarker, strokeWidth: 1.5, strokeDasharray: "3 2" }, `l${i}`)),
-    nodes.map((n, i) => {
-      const isGreen = i % 2 === 0;
-      return /* @__PURE__ */ jsxs("circle", { r: 4, fill: isGreen ? "#4ea36a" : "#c15a4a", stroke: "none", children: [
-        /* @__PURE__ */ jsx("animate", { attributeName: "cx", values: isGreen ? `${n.cx};${cx};${n.cx}` : `${cx};${n.cx};${cx}`, dur: `${1.5 + i % 3 * 0.3}s`, repeatCount: "indefinite", begin: `${i * 0.15}s` }),
-        /* @__PURE__ */ jsx("animate", { attributeName: "cy", values: isGreen ? `${n.cy};${cy};${n.cy}` : `${cy};${n.cy};${cy}`, dur: `${1.5 + i % 3 * 0.3}s`, repeatCount: "indefinite", begin: `${i * 0.15}s` })
-      ] }, `d${i}`);
-    }),
-    /* @__PURE__ */ jsx("path", { d: hexPath, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx("text", { x: cx, y: cy - 8, fontSize: 10, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("exchange.sign") }),
-    /* @__PURE__ */ jsx("text", { "data-cdl-role": "node-body", x: cx, y: cy + 12, fontSize: 22, fontWeight: 700, textAnchor: "middle", fill: "#e5c07b", children: "\u21C4" }),
-    /* @__PURE__ */ jsx("text", { x: cx, y: cy + 26, fontSize: 8, fontWeight: 700, textAnchor: "middle", fill: "#a4b5f2", children: \u5B57\u5F15("exchange.sub") }),
-    nodes.map((n, i) => /* @__PURE__ */ jsx("circle", { cx: n.cx, cy: n.cy, r: 8, fill: n.fill, stroke: accentDarker, strokeWidth: 1.5 }, `n${i}`))
-  ] });
+  const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
+    { text: \u5B57\u5F15("exchange.sub"), size: EXCHANGE_SUB_SIZE, \u5E2F: { \u5E45: \u5916 * 2, \u9AD8\u3055: 14 } }
+  ];
+  const \u7D75 = (\u500D\u7387) => {
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    return /* @__PURE__ */ jsxs("g", { children: [
+      nodes.map((n, i) => /* @__PURE__ */ jsx("line", { x1: cx, y1: cy, x2: n.cx, y2: n.cy, stroke: accentDarker, strokeWidth: 1.5, strokeDasharray: "3 2" }, `l${i}`)),
+      nodes.map((n, i) => {
+        const isGreen = i % 2 === 0;
+        return /* @__PURE__ */ jsxs("circle", { r: 4, fill: isGreen ? "#4ea36a" : "#c15a4a", stroke: "none", children: [
+          /* @__PURE__ */ jsx("animate", { attributeName: "cx", values: isGreen ? `${n.cx};${cx};${n.cx}` : `${cx};${n.cx};${cx}`, dur: `${1.5 + i % 3 * 0.3}s`, repeatCount: "indefinite", begin: `${i * 0.15}s` }),
+          /* @__PURE__ */ jsx("animate", { attributeName: "cy", values: isGreen ? `${n.cy};${cy};${n.cy}` : `${cy};${n.cy};${cy}`, dur: `${1.5 + i % 3 * 0.3}s`, repeatCount: "indefinite", begin: `${i * 0.15}s` })
+        ] }, `d${i}`);
+      }),
+      /* @__PURE__ */ jsx("path", { d: hexPath, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: cx, y: cy - 8, fontSize: 10, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("exchange.sign") }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", "data-cdl-role": "node-body", x: cx, y: cy + 12, fontSize: 22, fontWeight: 700, textAnchor: "middle", fill: "#e5c07b", children: "\u21C4" }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: cx, y: cy + 26, fontSize: EXCHANGE_SUB_SIZE * \u500D, fontWeight: 700, textAnchor: "middle", fill: "#a4b5f2", children: \u5B57\u5F15("exchange.sub") }),
+      nodes.map((n, i) => /* @__PURE__ */ jsx("circle", { cx: n.cx, cy: n.cy, r: 8, fill: n.fill, stroke: accentDarker, strokeWidth: 1.5 }, `n${i}`))
+    ] });
+  };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
     bottomLabel3(node, r.cx, r.label)
@@ -18306,13 +18398,13 @@ function ShapeAtmNode({ node, active, lang }) {
   const \u7D75 = /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx("ellipse", { cx, cy: y + totalH + ATM_SHADOW_DY, rx: totalW * ATM_SHADOW_RX_RATIO, ry: ATM_SHADOW_RY, fill: frame.stroke, opacity: 0.15, stroke: "none" }),
     /* @__PURE__ */ jsx("rect", { x: centerX - totalW / 2, y: signY, width: totalW, height: signH, fill: accentDarker, stroke: "#000", strokeWidth: ATM_SIGN_SW }),
-    /* @__PURE__ */ jsx("text", { x: centerX, y: signY + 17, fontSize: 11, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("atm.sign") }),
+    /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: centerX, y: signY + 17, fontSize: 11, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("atm.sign") }),
     /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x: atmX, y: atmY, width: atmW, height: atmH, rx: 6, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth }),
     /* @__PURE__ */ jsxs("g", { transform: `translate(${centerX} ${atmY}) scale(${\u9762})`, children: [
       /* @__PURE__ */ jsx("rect", { x: \u9762\u5DE6 + 8, y: 10, width: ATM_PANEL_W - 16, height: 52, rx: 3, fill: "#0f1830", stroke: "#000", strokeWidth: 1.5 }),
-      /* @__PURE__ */ jsx("text", { x: 0, y: 30, fontSize: 10, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#e5c07b", children: "\u304A\u5F15\u51FA\u3057" }),
-      /* @__PURE__ */ jsx("text", { x: 0, y: 44, fontSize: 8, fontWeight: 700, textAnchor: "middle", fill: "#a4b5f2", children: \u5B57\u5F15("atm.screen") }),
-      /* @__PURE__ */ jsx("text", { x: 0, y: 56, fontSize: 10, fontWeight: 700, textAnchor: "middle", fill: "#4ea36a", children: "\xA5 20,000" }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: 0, y: 30, fontSize: 10, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#e5c07b", children: "\u304A\u5F15\u51FA\u3057" }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: 0, y: 44, fontSize: 8, fontWeight: 700, textAnchor: "middle", fill: "#a4b5f2", children: \u5B57\u5F15("atm.screen") }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: 0, y: 56, fontSize: 10, fontWeight: 700, textAnchor: "middle", fill: "#4ea36a", children: "\xA5 20,000" }),
       /* @__PURE__ */ jsx("rect", { x: \u9762\u5DE6 + 8, y: 68, width: ATM_PANEL_W - 16, height: 42, rx: 2, fill: "#8b949e", stroke: "#5a6270", strokeWidth: 1 }),
       (() => {
         const keys = [
@@ -18338,7 +18430,7 @@ function ShapeAtmNode({ node, active, lang }) {
           const ky = 74 + row * (keyH + 2);
           return /* @__PURE__ */ jsxs("g", { children: [
             /* @__PURE__ */ jsx("rect", { x: kx, y: ky, width: keyW, height: keyH, fill: k[1], stroke: "#0f1830", strokeWidth: 0.8 }),
-            /* @__PURE__ */ jsx("text", { x: kx + keyW / 2, y: ky + 7, fontSize: (
+            /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: kx + keyW / 2, y: ky + 7, fontSize: (
               /* 決める鍵 (末尾) は 2 字あるので小さく描く。 字は言語で変わるため位置で見分ける */
               i === keys.length - 1 ? 6 : 7
             ), fontWeight: 700, textAnchor: "middle", fill: "#ffffff", children: k[0] })
@@ -18347,7 +18439,7 @@ function ShapeAtmNode({ node, active, lang }) {
       })(),
       /* @__PURE__ */ jsx("rect", { x: \u9762\u5DE6 + 12, y: 116, width: ATM_PANEL_W - 24, height: 8, rx: 1.5, fill: "#0f1830", stroke: accentDarker, strokeWidth: 1 }),
       /* @__PURE__ */ jsx("rect", { x: \u9762\u5DE6 + 15, y: 118, width: ATM_PANEL_W - 30, height: 4, rx: 0.5, fill: "#e5c07b" }),
-      /* @__PURE__ */ jsx("text", { x: 0, y: 132, fontSize: 6, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("atm.cardSlot") }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: 0, y: 132, fontSize: 6, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("atm.cardSlot") }),
       /* @__PURE__ */ jsx("rect", { x: \u9762\u5DE6 + 12, y: 136, width: ATM_PANEL_W - 24, height: 4, rx: 1, fill: "#0f1830" })
     ] }),
     /* @__PURE__ */ jsx("rect", { x: centerX - totalW / 2, y: floorY, width: totalW, height: 6, fill: "#8b949e", stroke: "none" }),
@@ -18520,7 +18612,7 @@ function ShapeWarehouseNode({ node, active, lang }) {
     /* @__PURE__ */ jsx("path", { d: `M ${x - WAREHOUSE_ROOF_OUT} ${y + roofH} L ${x + 12} ${y + 2} L ${x + bw - 12} ${y + 2} L ${x + bw + WAREHOUSE_ROOF_OUT} ${y + roofH} Z`, fill: "#5a6270", stroke: accentDarker, strokeWidth: WAREHOUSE_ROOF_SW, strokeLinejoin: "round" }),
     /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y: y + roofH, width: bw, height: bh - roofH - 12, fill: "#a89d8f", stroke: "#5a6270", strokeWidth: frame.strokeWidth }),
     /* @__PURE__ */ jsx("rect", { x, y: y + roofH, width: bw, height: signH, fill: "#c15a4a", stroke: "#8b3f2f", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsx("text", { x: cx, y: y + roofH + 17, fontSize: 12, fontWeight: 900, letterSpacing: 6, textAnchor: "middle", fill: "#ffffff", children: \u5B57\u5F15("warehouse.sign") }),
+    /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: cx, y: y + roofH + 17, fontSize: 12, fontWeight: 900, letterSpacing: 6, textAnchor: "middle", fill: "#ffffff", children: \u5B57\u5F15("warehouse.sign") }),
     /* @__PURE__ */ jsx("rect", { x: shutterX, y: shutterY, width: shutterW, height: shutterH, fill: "#8b949e", stroke: accentDarker, strokeWidth: 2 }),
     /* @__PURE__ */ jsx("rect", { x: shutterX, y: shutterY, width: shutterW, height: 5, fill: "#5a6270", stroke: "none" }),
     Array.from({ length: 10 }, (_, i) => i).map((i) => /* @__PURE__ */ jsx(
@@ -18675,6 +18767,10 @@ var API_ROW_PITCH_MIN = 30;
 var API_ROW_BOTTOM_PAD = 12;
 var API_ROWS = 3;
 var API_H_MIN = API_ROW_TOP + (API_ROWS - 1) * API_ROW_PITCH_MIN + API_ROW_H + API_ROW_BOTTOM_PAD;
+var API_PATH_SIZE = 12;
+var API_SIGN_SIZE = 14;
+var API_METHOD_BOX_W = 54;
+var API_METHOD_TEXT_W = 48;
 var API_W_MIN = 200;
 var API_W_MAX = 300;
 function ShapeApiGatewayNode({ node, active, lang }) {
@@ -18689,28 +18785,37 @@ function ShapeApiGatewayNode({ node, active, lang }) {
   const x = cx - bw / 2;
   const y = r.cy - \u7E26 / 2 + \u4F59\u767D;
   const \u5E83\u304C\u308A = { \u4E0A: \u7E26 / 2, \u4E0B: \u7E26 / 2, \u5DE6: bw / 2 + \u4F59\u767D, \u53F3: bw / 2 + \u4F59\u767D };
-  const \u7A2E\u985E\u306E\u5B57 = (s) => Math.min(11, 11 * 48 / Math.max(displayWidth(s) * 11 * MONO_ADVANCE_RATIO, textWidth(s, 11)));
+  const \u7A2E\u985E\u306E\u5B57 = (s) => Math.min(11, 11 * API_METHOD_TEXT_W / Math.max(displayWidth(s) * 11 * MONO_ADVANCE_RATIO, textWidth(s, 11)));
   const rowPitch = Math.max(
     API_ROW_PITCH_MIN,
     (bh - API_ROW_TOP - API_ROW_H - API_ROW_BOTTOM_PAD) / (API_ROWS - 1)
   );
-  const \u7D75 = /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("rect", { x: x + DROP_SHADOW_D, y: y + DROP_SHADOW_D, width: bw, height: bh, rx: 10, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
-    /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 10, fill: "#1a2332", stroke: frame.stroke, strokeWidth: frame.strokeWidth }),
-    /* @__PURE__ */ jsx("rect", { x, y, width: bw, height: 36, rx: 10, fill: "var(--cdl-tone-accent, #2d6a8f)", stroke: "none" }),
-    /* @__PURE__ */ jsx("text", { x: cx, y: y + 24, fontSize: 14, fontWeight: 700, letterSpacing: 3, textAnchor: "middle", fill: "#ffffff", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: \u5B57\u5F15("apiGateway.sign") }),
-    [
-      { method: "GET", path: \u5B57\u5F15("apiGateway.users"), color: "#27c93f" },
-      { method: "POST", path: \u5B57\u5F15("apiGateway.orders"), color: "#e5c07b" },
-      { method: \u5B57\u5F15("apiGateway.delete"), path: \u5B57\u5F15("apiGateway.session"), color: "#c9302c" }
-    ].map((e, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(${x + 16}, ${y + API_ROW_TOP + i * rowPitch})`, children: [
-      /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: bw - 32, height: API_ROW_H, rx: 4, fill: "#0f1419", stroke: "none" }),
-      /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 54, height: API_ROW_H, rx: 4, fill: e.color, stroke: "none" }),
-      /* @__PURE__ */ jsx("text", { x: 27, y: 16, fontSize: \u7A2E\u985E\u306E\u5B57(e.method), fontWeight: 700, textAnchor: "middle", fill: "#ffffff", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: e.method }),
-      /* @__PURE__ */ jsx("text", { x: 64, y: 16, fontSize: 12, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#e6edf3", children: e.path }),
-      /* @__PURE__ */ jsx("circle", { cx: bw - 44, cy: 12, r: 4, fill: "#27c93f", stroke: "none", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.4;1;0.4", dur: `${1.2 + i * 0.3}s`, repeatCount: "indefinite" }) })
-    ] }, i))
-  ] });
+  const \u884C\u3089 = [
+    { method: "GET", path: \u5B57\u5F15("apiGateway.users"), color: "#27c93f" },
+    { method: "POST", path: \u5B57\u5F15("apiGateway.orders"), color: "#e5c07b" },
+    { method: \u5B57\u5F15("apiGateway.delete"), path: \u5B57\u5F15("apiGateway.session"), color: "#c9302c" }
+  ];
+  const \u6253\u3061\u6D88\u3059\u5B57\u3089 = \u884C\u3089.map((e) => ({
+    text: e.path,
+    size: API_PATH_SIZE,
+    \u5E2F: { \u5E45: bw - 32 - 64 - 16, \u9AD8\u3055: API_ROW_H }
+  }));
+  const \u7D75 = (\u500D\u7387) => {
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("rect", { x: x + DROP_SHADOW_D, y: y + DROP_SHADOW_D, width: bw, height: bh, rx: 10, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
+      /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 10, fill: "#1a2332", stroke: frame.stroke, strokeWidth: frame.strokeWidth }),
+      /* @__PURE__ */ jsx("rect", { x, y, width: bw, height: 36, rx: 10, fill: "var(--cdl-tone-accent, #2d6a8f)", stroke: "none" }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: cx, y: y + 24, fontSize: API_SIGN_SIZE, fontWeight: 700, letterSpacing: 3, textAnchor: "middle", fill: "#ffffff", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: \u5B57\u5F15("apiGateway.sign") }),
+      \u884C\u3089.map((e, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(${x + 16}, ${y + API_ROW_TOP + i * rowPitch})`, children: [
+        /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: bw - 32, height: API_ROW_H, rx: 4, fill: "#0f1419", stroke: "none" }),
+        /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: API_METHOD_BOX_W, height: API_ROW_H, rx: 4, fill: e.color, stroke: "none" }),
+        /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: 27, y: 16, fontSize: \u7A2E\u985E\u306E\u5B57(e.method), fontWeight: 700, textAnchor: "middle", fill: "#ffffff", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: e.method }),
+        /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: 64, y: 16, fontSize: API_PATH_SIZE * \u500D, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#e6edf3", children: e.path }),
+        /* @__PURE__ */ jsx("circle", { cx: bw - 44, cy: 12, r: 4, fill: "#27c93f", stroke: "none", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.4;1;0.4", dur: `${1.2 + i * 0.3}s`, repeatCount: "indefinite" }) })
+      ] }, i))
+    ] });
+  };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
     bottomLabel4(node, r.cx, r.label)
@@ -18930,11 +19035,11 @@ function ShapeNotaryNode({ node, active }) {
       /* @__PURE__ */ jsx("line", { x1: chestX - 14, y1: chestY + 14, x2: chestX + 14, y2: chestY + 14, stroke: "#8b949e", strokeWidth: 1 }),
       /* @__PURE__ */ jsx("line", { x1: chestX - 14, y1: chestY + 22, x2: chestX + 8, y2: chestY + 22, stroke: "#8b949e", strokeWidth: 1 }),
       /* @__PURE__ */ jsx("line", { x1: chestX - 14, y1: chestY + 34, x2: chestX + 2, y2: chestY + 34, stroke: "#0f3450", strokeWidth: 1.5 }),
-      /* @__PURE__ */ jsx("text", { x: chestX + 6, y: chestY + 37, fontSize: 8, fill: "#0f3450", fontFamily: "cursive", fontStyle: "italic", children: "\u2713" }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: chestX + 6, y: chestY + 37, fontSize: 8, fill: "#0f3450", fontFamily: "cursive", fontStyle: "italic", children: "\u2713" }),
       haloBadge(bx, by, `nt-halo-${node.id}`, "#c15a4a", /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 12, fill: "#c15a4a", stroke: "none" }),
         /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 8, fill: "none", stroke: "#ffffff", strokeWidth: 1.2 }),
-        /* @__PURE__ */ jsx("text", { x: 0, y: 4, fontFamily: "Georgia, serif", fontSize: 10, fontWeight: 700, fill: "#ffffff", textAnchor: "middle", children: "\u5370" })
+        /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: 0, y: 4, fontFamily: "Georgia, serif", fontSize: 10, fontWeight: 700, fill: "#ffffff", textAnchor: "middle", children: "\u5370" })
       ] }))
     ] })),
     bottomLabel5(node, r.cx, r.label)
@@ -18993,7 +19098,7 @@ function ShapeCustomerServiceNode({ node, active }) {
       p.render,
       collarV(cx, cy, p.strokeColor),
       /* @__PURE__ */ jsx("rect", { x: chestX - 22, y: chestY + 5, width: 44, height: 22, rx: 11, fill: "#e5c07b", stroke: "#a67c00", strokeWidth: 2 }),
-      /* @__PURE__ */ jsx("text", { x: chestX, y: chestY + 20, fontSize: 12, fontWeight: 900, fill: "#5a3a10", textAnchor: "middle", letterSpacing: 2, children: "24H" }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: chestX, y: chestY + 20, fontSize: 12, fontWeight: 900, fill: "#5a3a10", textAnchor: "middle", letterSpacing: 2, children: "24H" }),
       haloBadge(bx, by, `cs-halo-${node.id}`, "#a67c00", /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx("path", { d: "M -11 4 C -11 -10, -6 -12, 0 -12 C 6 -12, 11 -10, 11 4", fill: "none", stroke: "#a67c00", strokeWidth: 2.5, strokeLinecap: "round" }),
         /* @__PURE__ */ jsx("rect", { x: -13, y: 2, width: 6, height: 11, rx: 1.5, fill: "#e5c07b", stroke: "#a67c00", strokeWidth: 1.5 }),