@cardenelabs/cdl 0.55.0 → 0.57.0

package/dist/react.js

@@ -10864,6 +10864,55 @@ function ActorNode({ node, active, value }) {
     )
   ] });
 }
+
+// src/kinds/subtitle-lines.ts
+var SUBTITLE_SIZE = 21;
+var SUBTITLE_MIN_SIZE = 12;
+var \u884C\u9001\u308A\u306E\u500D\u7387 = 1.2;
+function \u8AAC\u660E\u6587\u3092\u5272\u308A\u4ED8\u3051\u308B(text, maxWidth, opts) {
+  const \u76EE\u6A19 = opts.targetSize ?? SUBTITLE_SIZE;
+  const \u8AAD\u3081\u308B\u5927\u304D\u3055 = fitTextSize(text, maxWidth, \u76EE\u6A19, SUBTITLE_MIN_SIZE);
+  if (estimateTextWidth(text, \u8AAD\u3081\u308B\u5927\u304D\u3055) <= maxWidth) return { size: \u8AAD\u3081\u308B\u5927\u304D\u3055, lines: [text] };
+  if (opts.\u4E8C\u884C\u307E\u3067) {
+    for (let size = \u76EE\u6A19; size >= SUBTITLE_MIN_SIZE; size -= 1) {
+      const \u884C = \u4E8C\u884C\u306B\u5272\u308B(text, maxWidth, size);
+      if (\u884C) return { size, lines: \u884C };
+    }
+  }
+  return { size: fitTextSize(text, maxWidth, \u76EE\u6A19, MIN_TEXT_SIZE), lines: [text] };
+}
+function \u4E8C\u884C\u306B\u5272\u308B(text, maxWidth, size) {
+  let \u4E00\u756A\u826F\u3044;
+  let \u4E00\u756A\u72ED\u3044 = Infinity;
+  for (const [\u5DE6, \u53F3] of \u5272\u308B\u5019\u88DC(text)) {
+    const \u5E45 = Math.max(estimateTextWidth(\u5DE6, size), estimateTextWidth(\u53F3, size));
+    if (\u5E45 > maxWidth || \u5E45 >= \u4E00\u756A\u72ED\u3044) continue;
+    \u4E00\u756A\u72ED\u3044 = \u5E45;
+    \u4E00\u756A\u826F\u3044 = [\u5DE6, \u53F3];
+  }
+  return \u4E00\u756A\u826F\u3044;
+}
+function \u5272\u308B\u5019\u88DC(text) {
+  const \u533A\u5207\u308A = [];
+  for (const m of text.matchAll(/\s*\/\s*/g)) {
+    \u533A\u5207\u308A.push([text.slice(0, m.index).trim(), text.slice(m.index + m[0].length).trim()]);
+  }
+  if (\u533A\u5207\u308A.length > 0) return \u533A\u5207\u308A.filter(\u5165\u3063\u3066\u3044\u308B);
+  const \u7A7A\u767D = [];
+  for (const m of text.matchAll(/\s+/g)) {
+    \u7A7A\u767D.push([text.slice(0, m.index).trim(), text.slice(m.index + m[0].length).trim()]);
+  }
+  if (\u7A7A\u767D.length > 0) return \u7A7A\u767D.filter(\u5165\u3063\u3066\u3044\u308B);
+  const \u5B57 = [];
+  const \u4E26\u3073 = [...text];
+  for (let i = 1; i < \u4E26\u3073.length; i += 1) {
+    \u5B57.push([\u4E26\u3073.slice(0, i).join(""), \u4E26\u3073.slice(i).join("")]);
+  }
+  return \u5B57.filter(\u5165\u3063\u3066\u3044\u308B);
+}
+function \u5165\u3063\u3066\u3044\u308B([\u5DE6, \u53F3]) {
+  return \u5DE6 !== "" && \u53F3 !== "";
+}
 function CardNode({ node, active }) {
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
@@ -10888,7 +10937,12 @@ function CardNode({ node, active }) {
   const initialTitleSize = compact ? 20 : 24;
   const titleSize = fitTextSize(node.title, availableW, initialTitleSize, 11);
   const textAnchor = compact ? "middle" : "start";
-  const subtitleSize = node.subtitle ? fitTextSize(node.subtitle, availableW, 21, 11) : 21;
+  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 \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;
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x} ${y})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -10918,7 +10972,17 @@ function CardNode({ node, active }) {
         children: node.title
       }
     ),
-    !compact && node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 124 - \u305A\u3089\u3057, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    !compact && \u8AAC\u660E?.lines.map((\u884C, i) => /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: 26,
+        y: subtitleY + (i - (\u8AAC\u660E.lines.length - 1) / 2) * \u884C\u9001\u308A,
+        fontSize: subtitleSize,
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: \u884C
+      },
+      `sub-${i}`
+    )),
     \u5C0F\u578B\u306B\u547C\u3073\u540D && /* @__PURE__ */ jsx(
       "text",
       {
@@ -14450,6 +14514,13 @@ function UserJourneyNode({
     frustrated: "\u{1F615}",
     angry: "\u{1F620}"
   };
+  const emotionLabel = {
+    delighted: "\u5927\u6E80\u8DB3",
+    happy: "\u6E80\u8DB3",
+    neutral: "\u3075\u3064\u3046",
+    frustrated: "\u4E0D\u6E80",
+    angry: "\u6012\u308A"
+  };
   const rowH = canvasH / 5;
   const colW = canvasW / Math.max(steps.length, 1);
   const xAt = (idx) => PAD_LEFT2 + (steps.length <= 1 ? canvasW / 2 : colW / 2 + colW * idx);
@@ -14514,7 +14585,7 @@ function UserJourneyNode({
           fontWeight: 600,
           textAnchor: "end",
           fill: emotionColor[e],
-          children: e
+          children: emotionLabel[e]
         }
       )
     ] }, `band-${e}`)),