@cardenelabs/cdl 0.61.0 → 0.63.0

package/CHANGELOG.md

@@ -5,6 +5,39 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.63.0] - 2026-09-13
+
+### Changed
+
+- **状態の図と発想の図の段の札を、図の型と同じ綴りにした** (#859)
+
+  組み立て関数は最後の段に図の型と同じ綴りの札を付けるが、`stateMachine` は `fsm`、`stateMachine2` は
+  `statemachine2` を付けており、図の型 (`state`) と食い違っていた。 消費側は型の一覧で札を引けず、札だけが
+  型の名前に無い英語として残った。 2 つとも札を `state` にした (2 つの図の見分けは図の題が持つ)。
+
+  `mindMap` は図の型を `mindmap` から `mind` にし、札も `mind` にした。 他の組み立て関数と同じく短い名前
+  (`state` / `class` / `journey`) の並びに揃える。 **図の根の `data-cdl-type` が `mind` になる** ので、
+  `[data-cdl-type="mindmap"]` で見た目を決めている消費側は書き換えが要る。
+
+  グラフ (`chart`) は描き方の種類 (`pie` / `bar` / `line`) を札にする形のまま変えない。 札を族の名前
+  (`chart`) にすると、全てのグラフが同じ字になり見出しの役に立たない。
+
+## [0.62.0] - 2026-09-13
+
+### Changed
+
+- **稼働の時系列と在席の状態の字を、図の言語の辞書で描くようにした** (#857)
+
+  `status-timeline` と `user-presence` は、色を選ぶための状態の語 (`active` / `idle` / `error` と
+  `online` / `away` / `offline`) を字にもそのまま使っており、`lang: "ja"` の図でもこの字だけ英語で残っていた。
+  6 つの語を辞書で引き、日本語の図は `稼働` / `待機` / `異常` と `オンライン` / `離席` / `オフライン` を描く。
+  色は変わらず値の綴りで選び、描いた状態の値を `data-cdl-status` / `data-cdl-presence-status` の目印に出す。
+  辞書に無い状態の値は、`status-timeline` は大文字で、`user-presence` はそのまま描く。
+
+  `status-timeline` の区間の字は、6 字以上を 4 字で切る形をやめ、区間の幅に収まるだけ描く (#851 と同じ理由)。
+  収まらない時は `…` で省き、区間の見出し (`title`) に省く前の字を出す。 英語の図は `active` の区間を幅が
+  足りれば `ACTIVE` と描く (変更前は `ACTI`)。
+
 ## [0.61.0] - 2026-09-13
 
 ### Added
@@ -2645,7 +2678,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.61.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.63.0...HEAD
+[0.63.0]: https://github.com/cardene777/cdl/compare/v0.62.0...v0.63.0
+[0.62.0]: https://github.com/cardene777/cdl/compare/v0.61.0...v0.62.0
 [0.61.0]: https://github.com/cardene777/cdl/compare/v0.60.0...v0.61.0
 [0.60.0]: https://github.com/cardene777/cdl/compare/v0.59.1...v0.60.0
 [0.59.1]: https://github.com/cardene777/cdl/compare/v0.59.0...v0.59.1

package/dist/index.cjs

@@ -560,6 +560,18 @@ var en = {
   "readout.kanban.inprogress": "In Progress",
   /** `kanban-board` の列の見出し (値は `done` で読む) */
   "readout.kanban.done": "Done",
+  /** `status-timeline` の区間の字 (値は `active` で読む) */
+  "readout.statusTimeline.active": "ACTIVE",
+  /** `status-timeline` の区間の字 (値は `idle` で読む) */
+  "readout.statusTimeline.idle": "IDLE",
+  /** `status-timeline` の区間の字 (値は `error` で読む) */
+  "readout.statusTimeline.error": "ERROR",
+  /** `user-presence` の状態の字 (値は `online` で読む) */
+  "readout.presence.online": "online",
+  /** `user-presence` の状態の字 (値は `away` で読む) */
+  "readout.presence.away": "away",
+  /** `user-presence` の状態の字 (値は `offline` で読む) */
+  "readout.presence.offline": "offline",
   /** `traffic-light` の赤の灯の見出し (値は `red` で読む) */
   "readout.trafficLight.red": "red",
   /** `traffic-light` の黄の灯の見出し (値は `yellow` / `amber` で読む) */
@@ -668,6 +680,12 @@ var ja = {
   "readout.kanban.todo": "\u672A\u7740\u624B",
   "readout.kanban.inprogress": "\u9032\u884C\u4E2D",
   "readout.kanban.done": "\u5B8C\u4E86",
+  "readout.statusTimeline.active": "\u7A3C\u50CD",
+  "readout.statusTimeline.idle": "\u5F85\u6A5F",
+  "readout.statusTimeline.error": "\u7570\u5E38",
+  "readout.presence.online": "\u30AA\u30F3\u30E9\u30A4\u30F3",
+  "readout.presence.away": "\u96E2\u5E2D",
+  "readout.presence.offline": "\u30AA\u30D5\u30E9\u30A4\u30F3",
   "readout.trafficLight.red": "\u8D64",
   "readout.trafficLight.yellow": "\u9EC4",
   "readout.trafficLight.green": "\u7DD1"
@@ -1697,6 +1715,111 @@ function requiredRowsWidth(rows, kind) {
   if (kind === void 0) return Math.ceil(Math.max(storage, generic));
   return Math.ceil(kind === "storage" ? storage : generic);
 }
+
+// src/kinds/compact-title.ts
+function estimateTextWidth(text, fontSize) {
+  let w = 0;
+  for (const ch of text) {
+    const isFullWidth = /[\u3000-\u9FFF\uFF00-\uFFEF]/.test(ch);
+    w += fontSize * (isFullWidth ? 1.05 : 0.62);
+  }
+  return w;
+}
+function fitTextSize(text, maxWidth, targetSize, minSize) {
+  let size = targetSize;
+  while (size > minSize && estimateTextWidth(text, size) > maxWidth) {
+    size -= 1;
+  }
+  return size;
+}
+var COMPACT_MAX_H = 100;
+var COMPACT_PADDING_X = 16;
+var MIN_TEXT_SIZE = 11;
+var ASCENT = 0.72;
+var DESCENT = 0.25;
+var MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT + DESCENT);
+var EYEBROW_BASELINE = 38;
+var EYEBROW_SIZE = 18;
+var EYEBROW_GAP = 8;
+var BOTTOM_INSET = 4;
+var eyebrowBottom = () => EYEBROW_BASELINE + EYEBROW_SIZE * DESCENT;
+var titleBandTop = (hasEyebrow) => eyebrowBottom() + EYEBROW_GAP ;
+var isCompactBox = (h) => h < COMPACT_MAX_H;
+function titlePlacement(node, \u901A\u5E38, opts = {}) {
+  if (!isCompactBox(node.h)) {
+    return { x: \u901A\u5E38.x, y: \u901A\u5E38.y, size: \u901A\u5E38.size, anchor: "start" };
+  }
+  const \u9AD8\u3055 = Math.max(0, node.h);
+  const \u76EE\u5370\u3042\u308A = opts.hasEyebrow === true;
+  const \u4E0A = \u76EE\u5370\u3042\u308A && \u9AD8\u3055 >= eyebrowBottom() ? titleBandTop() : 0;
+  const \u751F\u306E\u5E2F = Math.max(0, \u9AD8\u3055 - \u4E0A);
+  const \u4E0B\u4F59\u767D = \u751F\u306E\u5E2F >= MIN_BAND_H + BOTTOM_INSET ? BOTTOM_INSET : 0;
+  const \u5E2F = \u751F\u306E\u5E2F - \u4E0B\u4F59\u767D;
+  const \u5E45\u3067 = fitTextSize(
+    node.title,
+    Math.max(0, node.w - COMPACT_PADDING_X),
+    \u901A\u5E38.size,
+    MIN_TEXT_SIZE
+  );
+  const \u5E2F\u3067 = Math.floor(\u5E2F / (ASCENT + DESCENT));
+  const size = Math.max(MIN_TEXT_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
+  const \u5B57\u9AD8 = size * (ASCENT + DESCENT);
+  const y = \u5B57\u9AD8 <= \u5E2F ? \u4E0A + \u5E2F / 2 + size * (ASCENT - DESCENT) / 2 : \u4E0A > 0 ? \u4E0A + size * ASCENT : (\u9AD8\u3055 - \u5B57\u9AD8) / 2 + size * ASCENT;
+  return { x: node.w / 2, y, size, anchor: "middle" };
+}
+
+// src/kinds/box-lines.ts
+var \u884C\u9001\u308A\u306E\u6BD4 = 1.15;
+var \u5B57\u306E\u9AD8\u3055\u306E\u6BD4 = 0.72;
+var \u4E0A\u4E0B\u306E\u4F59\u767D = 2;
+var \u5DE6\u53F3\u306E\u4F59\u767D = 8;
+function \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45) {
+  return \u7BB1\u306E\u5E45 - \u5DE6\u53F3\u306E\u4F59\u767D * 2;
+}
+function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
+  if (\u4F7F\u3048\u308B\u5E452 <= 0) return "";
+  if (\u6E2C\u308B(text, fontSize) <= \u4F7F\u3048\u308B\u5E452) return text;
+  const \u7701\u7565 = "\u2026";
+  const \u7701\u7565\u306E\u5E45 = \u6E2C\u308B(\u7701\u7565, fontSize);
+  if (\u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) return "";
+  let \u51FA = "";
+  let \u5E45 = 0;
+  for (const c of \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text)) {
+    const \u5B57\u306E\u5E452 = \u6E2C\u308B(c, fontSize);
+    if (\u5E45 + \u5B57\u306E\u5E452 + \u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) break;
+    \u5E45 += \u5B57\u306E\u5E452;
+    \u51FA += c;
+  }
+  return `${\u51FA}${\u7701\u7565}`;
+}
+var \u7E2E\u3081\u306E\u4E0B\u9650 = MIN_TEXT_SIZE;
+function \u5E45\u306B\u53CE\u3081\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
+  let size = fontSize;
+  while (size > \u7E2E\u3081\u306E\u4E0B\u9650 && \u6E2C\u308B(text, size) > \u4F7F\u3048\u308B\u5E452) size -= 1;
+  return { text: \u5E45\u3067\u5207\u308B(text, size, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B), fontSize: size };
+}
+function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
+  const \u533A\u5207\u308A = Intl.Segmenter;
+  if (typeof \u533A\u5207\u308A !== "function") return [...text];
+  return [...new \u533A\u5207\u308A(void 0, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
+}
+function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30553) {
+  const \u5019\u88DC = \u884C.filter((r, i) => i === 0 || r.text.trim() !== "");
+  if (\u5019\u88DC.length === 0) return [];
+  const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u30553 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
+  const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
+  const \u6B8B\u3059 = [...\u5019\u88DC];
+  while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
+  const \u5E45 = \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45);
+  const \u53CE\u3081\u305F = \u6B8B\u3059.map((r) => ({ ...r, ...\u5E45\u306B\u53CE\u3081\u308B(r.text, r.fontSize, \u5E45) }));
+  const \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
+  let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
+  return \u53CE\u3081\u305F.map((r) => {
+    const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
+    \u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
+    return { ...r, dy };
+  });
+}
 var \u64CD\u4F5C\u90E8\u306E\u8A00\u8A9E = react.createContext("en");
 function use\u5B57\u5F15() {
   const lang = react.useContext(\u64CD\u4F5C\u90E8\u306E\u8A00\u8A9E);
@@ -7828,12 +7951,14 @@ function StatusTimelineReadout({
     } catch {
     }
   }
+  const \u5F15\u304F = use\u5B57\u5F15();
   const colorLookup = new Map(colorMap.map((c) => [c.status.toLowerCase(), c.color]));
   const shown = events.slice(0, max);
   const stripHeight = 28;
   const width = 320;
   const cellW = shown.length > 0 ? (width - 20) / shown.length : 0;
   const height = stripHeight + 40;
+  const \u533A\u9593\u306E\u5B57 = (status) => status === "active" || status === "idle" || status === "error" ? \u5F15\u304F(`readout.statusTimeline.${status}`) : status.toUpperCase();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdl-ip-item cdl-ip-readout-status-timeline", "data-cdl-readout": id, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-label", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7846,9 +7971,11 @@ function StatusTimelineReadout({
         children: shown.map((ev, i) => {
           const x = 10 + i * cellW;
           const c = colorLookup.get(ev.status) ?? "#cbd5e1";
-          return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-status-event": i, children: [
+          const \u5B572 = \u533A\u9593\u306E\u5B57(ev.status);
+          const \u63CF\u304F\u5B57 = \u5E45\u3067\u5207\u308B(\u5B572, 10, cellW - 8);
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-status-event": i, "data-cdl-status": ev.status, children: [
             /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: 10, width: cellW - 2, height: stripHeight, fill: c, rx: 2 }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsxs(
               "text",
               {
                 x: x + cellW / 2,
@@ -7858,7 +7985,10 @@ function StatusTimelineReadout({
                 fill: "#ffffff",
                 fontWeight: 600,
                 style: { userSelect: "none" },
-                children: ev.status.length > 5 ? ev.status.slice(0, 4).toUpperCase() : ev.status.toUpperCase()
+                children: [
+                  \u63CF\u304F\u5B57 !== \u5B572 ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: \u5B572 }) : null,
+                  \u63CF\u304F\u5B57
+                ]
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -8176,6 +8306,8 @@ function UserPresenceReadout({
   const width = 260;
   const height = shown.length * rowH + (overflow > 0 ? 20 : 0) + 8;
   const statusColor = (s) => s === "online" ? "#22c55e" : s === "away" ? "#eab308" : "#94a3b8";
+  const \u5F15\u304F = use\u5B57\u5F15();
+  const \u72B6\u614B\u306E\u5B57 = (s) => s === "online" || s === "away" || s === "offline" ? \u5F15\u304F(`readout.presence.${s}`) : s;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdl-ip-item cdl-ip-readout-user-presence", "data-cdl-readout": id, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-label", children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8188,7 +8320,7 @@ function UserPresenceReadout({
         children: [
           shown.map((u, i) => {
             const y = 4 + i * rowH;
-            return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-presence-user": i, children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-presence-user": i, "data-cdl-presence-status": u.status, children: [
               /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: y + rowH / 2, r: 6, fill: statusColor(u.status) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "text",
@@ -8211,7 +8343,7 @@ function UserPresenceReadout({
                   textAnchor: "end",
                   fill: "#64748b",
                   style: { userSelect: "none" },
-                  children: u.status
+                  children: \u72B6\u614B\u306E\u5B57(u.status)
                 }
               )
             ] }, i);
@@ -14288,8 +14420,8 @@ var TITLE_RATIO = 0.17;
 var SUB_RATIO = 0.72;
 var LINE_GAP = 3;
 var BOTTOM_PAD = 4;
-var ASCENT = 0.72;
-var DESCENT = 0.25;
+var ASCENT2 = 0.72;
+var DESCENT2 = 0.25;
 var ART_GAP = 4;
 var ART_MIN_BAND = 45;
 var \u843D\u3068\u3057\u3066\u3082\u63CF\u304F\u7A2E\u5225 = {
@@ -14347,9 +14479,9 @@ function labelPlan(node) {
     y -= \u540D\u524D\u5927 + LINE_GAP;
     const \u80A9\u66F8 = \u80A9\u66F8\u3042\u308A2 ? { y, size: \u5C0F\u3055\u3044\u5B57 } : null;
     const \u4E0A\u306E\u884C = \u80A9\u66F8 ?? \u540D\u524D;
-    return { \u540D\u524D, \u8AAC\u660E, \u80A9\u66F8, \u4E0A\u7AEF: \u4E0A\u306E\u884C.y - \u4E0A\u306E\u884C.size * ASCENT };
+    return { \u540D\u524D, \u8AAC\u660E, \u80A9\u66F8, \u4E0A\u7AEF: \u4E0A\u306E\u884C.y - \u4E0A\u306E\u884C.size * ASCENT2 };
   };
-  const \u5165\u308B = (\u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2) => \u7A4D\u3080(1, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, 1 * DESCENT).\u4E0A\u7AEF >= \u5929;
+  const \u5165\u308B = (\u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2) => \u7A4D\u3080(1, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, 1 * DESCENT2).\u4E0A\u7AEF >= \u5929;
   let \u8AAC\u660E\u3042\u308A = Boolean(node.subtitle);
   let \u80A9\u66F8\u3042\u308A = Boolean(node.eyebrow);
   const \u843D\u3068\u3057\u305F = [];
@@ -14367,14 +14499,14 @@ function labelPlan(node) {
     for (let size = \u4E0A\u9650; size >= 1; size--) {
       const \u5C0F\u3055\u3044\u5B572 = Math.max(1, Math.round(size * SUB_RATIO));
       const \u4E0B\u306E\u884C\u5927 = \u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B572 : size;
-      if (\u7A4D\u3080(size, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u306E\u884C\u5927 * DESCENT).\u4E0A\u7AEF >= \u5929) {
+      if (\u7A4D\u3080(size, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u306E\u884C\u5927 * DESCENT2).\u4E0A\u7AEF >= \u5929) {
         \u540D\u524D\u5927 = size;
         break;
       }
     }
-    if (\u540D\u524D\u5927 === 0) \u540D\u524D\u5927 = \u9AD8\u3055 / (ASCENT + DESCENT);
+    if (\u540D\u524D\u5927 === 0) \u540D\u524D\u5927 = \u9AD8\u3055 / (ASCENT2 + DESCENT2);
     const \u5C0F\u3055\u3044\u5B57 = Math.max(1, Math.round(\u540D\u524D\u5927 * SUB_RATIO));
-    const \u5F35\u308A\u51FA\u3057 = (\u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B57 : \u540D\u524D\u5927) * DESCENT;
+    const \u5F35\u308A\u51FA\u3057 = (\u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B57 : \u540D\u524D\u5927) * DESCENT2;
     const \u4F59\u308A = Math.max(0, \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u5F35\u308A\u51FA\u3057).\u4E0A\u7AEF - \u5929);
     const \u4E0B\u4F59\u767D = Math.min(Math.max(BOTTOM_PAD, \u5F35\u308A\u51FA\u3057), \u5F35\u308A\u51FA\u3057 + \u4F59\u308A);
     return \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u4F59\u767D);
@@ -14464,111 +14596,6 @@ function fitArt(region, extent, art) {
   return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${dx} ${dy}) scale(${s})`, children: art });
 }
 
-// src/kinds/compact-title.ts
-function estimateTextWidth(text, fontSize) {
-  let w = 0;
-  for (const ch of text) {
-    const isFullWidth = /[\u3000-\u9FFF\uFF00-\uFFEF]/.test(ch);
-    w += fontSize * (isFullWidth ? 1.05 : 0.62);
-  }
-  return w;
-}
-function fitTextSize(text, maxWidth, targetSize, minSize) {
-  let size = targetSize;
-  while (size > minSize && estimateTextWidth(text, size) > maxWidth) {
-    size -= 1;
-  }
-  return size;
-}
-var COMPACT_MAX_H = 100;
-var COMPACT_PADDING_X = 16;
-var MIN_TEXT_SIZE = 11;
-var ASCENT2 = 0.72;
-var DESCENT2 = 0.25;
-var MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT2 + DESCENT2);
-var EYEBROW_BASELINE = 38;
-var EYEBROW_SIZE = 18;
-var EYEBROW_GAP = 8;
-var BOTTOM_INSET = 4;
-var eyebrowBottom = () => EYEBROW_BASELINE + EYEBROW_SIZE * DESCENT2;
-var titleBandTop = (hasEyebrow) => eyebrowBottom() + EYEBROW_GAP ;
-var isCompactBox = (h) => h < COMPACT_MAX_H;
-function titlePlacement(node, \u901A\u5E38, opts = {}) {
-  if (!isCompactBox(node.h)) {
-    return { x: \u901A\u5E38.x, y: \u901A\u5E38.y, size: \u901A\u5E38.size, anchor: "start" };
-  }
-  const \u9AD8\u3055 = Math.max(0, node.h);
-  const \u76EE\u5370\u3042\u308A = opts.hasEyebrow === true;
-  const \u4E0A = \u76EE\u5370\u3042\u308A && \u9AD8\u3055 >= eyebrowBottom() ? titleBandTop() : 0;
-  const \u751F\u306E\u5E2F = Math.max(0, \u9AD8\u3055 - \u4E0A);
-  const \u4E0B\u4F59\u767D = \u751F\u306E\u5E2F >= MIN_BAND_H + BOTTOM_INSET ? BOTTOM_INSET : 0;
-  const \u5E2F = \u751F\u306E\u5E2F - \u4E0B\u4F59\u767D;
-  const \u5E45\u3067 = fitTextSize(
-    node.title,
-    Math.max(0, node.w - COMPACT_PADDING_X),
-    \u901A\u5E38.size,
-    MIN_TEXT_SIZE
-  );
-  const \u5E2F\u3067 = Math.floor(\u5E2F / (ASCENT2 + DESCENT2));
-  const size = Math.max(MIN_TEXT_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
-  const \u5B57\u9AD8 = size * (ASCENT2 + DESCENT2);
-  const y = \u5B57\u9AD8 <= \u5E2F ? \u4E0A + \u5E2F / 2 + size * (ASCENT2 - DESCENT2) / 2 : \u4E0A > 0 ? \u4E0A + size * ASCENT2 : (\u9AD8\u3055 - \u5B57\u9AD8) / 2 + size * ASCENT2;
-  return { x: node.w / 2, y, size, anchor: "middle" };
-}
-
-// src/kinds/box-lines.ts
-var \u884C\u9001\u308A\u306E\u6BD4 = 1.15;
-var \u5B57\u306E\u9AD8\u3055\u306E\u6BD4 = 0.72;
-var \u4E0A\u4E0B\u306E\u4F59\u767D = 2;
-var \u5DE6\u53F3\u306E\u4F59\u767D = 8;
-function \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45) {
-  return \u7BB1\u306E\u5E45 - \u5DE6\u53F3\u306E\u4F59\u767D * 2;
-}
-function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
-  if (\u4F7F\u3048\u308B\u5E452 <= 0) return "";
-  if (\u6E2C\u308B(text, fontSize) <= \u4F7F\u3048\u308B\u5E452) return text;
-  const \u7701\u7565 = "\u2026";
-  const \u7701\u7565\u306E\u5E45 = \u6E2C\u308B(\u7701\u7565, fontSize);
-  if (\u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) return "";
-  let \u51FA = "";
-  let \u5E45 = 0;
-  for (const c of \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text)) {
-    const \u5B57\u306E\u5E452 = \u6E2C\u308B(c, fontSize);
-    if (\u5E45 + \u5B57\u306E\u5E452 + \u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) break;
-    \u5E45 += \u5B57\u306E\u5E452;
-    \u51FA += c;
-  }
-  return `${\u51FA}${\u7701\u7565}`;
-}
-var \u7E2E\u3081\u306E\u4E0B\u9650 = MIN_TEXT_SIZE;
-function \u5E45\u306B\u53CE\u3081\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
-  let size = fontSize;
-  while (size > \u7E2E\u3081\u306E\u4E0B\u9650 && \u6E2C\u308B(text, size) > \u4F7F\u3048\u308B\u5E452) size -= 1;
-  return { text: \u5E45\u3067\u5207\u308B(text, size, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B), fontSize: size };
-}
-function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
-  const \u533A\u5207\u308A = Intl.Segmenter;
-  if (typeof \u533A\u5207\u308A !== "function") return [...text];
-  return [...new \u533A\u5207\u308A(void 0, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
-}
-function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30553) {
-  const \u5019\u88DC = \u884C.filter((r, i) => i === 0 || r.text.trim() !== "");
-  if (\u5019\u88DC.length === 0) return [];
-  const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u30553 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
-  const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
-  const \u6B8B\u3059 = [...\u5019\u88DC];
-  while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
-  const \u5E45 = \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45);
-  const \u53CE\u3081\u305F = \u6B8B\u3059.map((r) => ({ ...r, ...\u5E45\u306B\u53CE\u3081\u308B(r.text, r.fontSize, \u5E45) }));
-  const \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
-  let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
-  return \u53CE\u3081\u305F.map((r) => {
-    const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
-    \u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
-    return { ...r, dy };
-  });
-}
-
 // src/render/tone.ts
 var TONE = {
   accent: "var(--cdl-tone-accent, #2d6a8f)",
@@ -23866,7 +23893,7 @@ function CardNode({ node, active }) {
   const textAnchor = compact ? "middle" : "start";
   const subtitleY = 124 - \u305A\u3089\u3057;
   const \u6700\u5927\u306E\u884C\u9001\u308A = SUBTITLE_SIZE * \u884C\u9001\u308A\u306E\u500D\u7387;
-  const \u4E8C\u884C\u304C\u5165\u308B = !compact && subtitleY - \u6700\u5927\u306E\u884C\u9001\u308A / 2 - SUBTITLE_SIZE * ASCENT2 > titleY + titleSize * DESCENT2 && subtitleY + \u6700\u5927\u306E\u884C\u9001\u308A / 2 + SUBTITLE_SIZE * DESCENT2 <= node.h - 4;
+  const \u4E8C\u884C\u304C\u5165\u308B = !compact && subtitleY - \u6700\u5927\u306E\u884C\u9001\u308A / 2 - SUBTITLE_SIZE * ASCENT > titleY + titleSize * DESCENT && subtitleY + \u6700\u5927\u306E\u884C\u9001\u308A / 2 + SUBTITLE_SIZE * DESCENT <= node.h - 4;
   const \u8AAC\u660E = node.subtitle ? \u8AAC\u660E\u6587\u3092\u5272\u308A\u4ED8\u3051\u308B(node.subtitle, availableW, { \u4E8C\u884C\u307E\u3067: \u4E8C\u884C\u304C\u5165\u308B }) : void 0;
   const subtitleSize = \u8AAC\u660E?.size ?? 21;
   const \u884C\u9001\u308A = subtitleSize * \u884C\u9001\u308A\u306E\u500D\u7387;
@@ -27678,8 +27705,8 @@ var EYEBROW_TRACKING = 2;
 var SUB_SIZE = 11;
 var SUB_GAP = 4;
 function labelBlock(node, pos, size, band) {
-  const \u4E0A = node.eyebrow ? size + EYEBROW_GAP2 + EYEBROW_SIZE2 * ASCENT : size * ASCENT;
-  const \u4E0B = node.subtitle ? size + SUB_GAP + SUB_SIZE * DESCENT : size * DESCENT;
+  const \u4E0A = node.eyebrow ? size + EYEBROW_GAP2 + EYEBROW_SIZE2 * ASCENT2 : size * ASCENT2;
+  const \u4E0B = node.subtitle ? size + SUB_GAP + SUB_SIZE * DESCENT2 : size * DESCENT2;
   const \u5E45 = Math.max(
     textWidth(node.title ?? "", size),
     node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING) : 0,
@@ -32902,7 +32929,8 @@ var FSM_ACTION_MARK = {
 function stateMachine(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
+  const diagramType = "state";
+  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
   const phaseActivate = [];
   const stateOrder = /* @__PURE__ */ new Map();
   const \u72B6\u614B = [];
@@ -33003,7 +33031,7 @@ function stateMachine(preset) {
       b.phase(
         "fsm",
         { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u72B6\u614B\u3068\u9077\u79FB\u3092\u4E26\u3079\u305F\u59FF\u3002" },
-        (p) => p.activate(...phaseActivate).badge("fsm")
+        (p) => p.activate(...phaseActivate).badge(diagramType)
       );
       return b.build();
     }
@@ -33262,7 +33290,8 @@ function userJourney(preset) {
 function mindMap(preset) {
   const canvasW = preset.branchWidth ? preset.branchWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic, type: "mindmap" });
+  const diagramType = "mind";
+  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
   const branches = [];
   const api = {
     branch(br) {
@@ -33296,7 +33325,7 @@ function mindMap(preset) {
       b.phase(
         "mindmap",
         { duration: 2400, title: preset.topic, body: "\u4E2D\u5FC3\u306E\u4E3B\u984C\u304B\u3089\u3001\u3059\u3079\u3066\u306E\u679D\u3092\u653E\u5C04\u72B6\u306B\u5E83\u3052\u305F\u59FF\u3002" },
-        (p) => p.activate(nodeId).badge("mindmap")
+        (p) => p.activate(nodeId).badge(diagramType)
       );
       return b.build();
     }
@@ -33629,7 +33658,8 @@ function stateMachine2(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine2");
   const laneW = boxLaneW(stateW);
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
+  const diagramType = "state";
+  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
   const stateOrder = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let transIdx = 0;
@@ -33685,7 +33715,7 @@ function stateMachine2(preset) {
           title: preset.topic,
           body: "\u5165\u308C\u5B50\u306E\u72B6\u614B\u3068\u3001\u5165\u308B\u6642\u30FB\u51FA\u308B\u6642\u306E\u51E6\u7406\u3092\u542B\u3081\u305F\u3001\u3059\u3079\u3066\u306E\u72B6\u614B\u3068\u9077\u79FB\u3002"
         },
-        (p) => p.activate(...phaseActivate).badge("statemachine2")
+        (p) => p.activate(...phaseActivate).badge(diagramType)
       );
       const d = b.build();
       return {