@cardenelabs/cdl 0.6.0 → 0.7.0

package/dist/react.js

@@ -6428,6 +6428,31 @@ function resolveJourneyData(steps, values) {
     return e.ok ? { ...s, emotion: e.value } : { ...s, emotion: e.value, unresolved: true };
   });
 }
+function resolveBoundText(raw, values) {
+  if (!raw.includes("{")) return { value: raw, ok: true };
+  const resolved = interpolate(raw, values);
+  return hasUnresolvedRef(resolved) ? { value: resolved, ok: false } : { value: resolved, ok: true };
+}
+function resolveTreeData(nodes, values) {
+  if (!nodes.some((n) => n.title.includes("{"))) return nodes;
+  return nodes.map((n) => {
+    const title = resolveBoundText(n.title, values);
+    const \u89E3\u6C7A\u5F8C = { ...n, title: title.value };
+    return title.ok ? \u89E3\u6C7A\u5F8C : { ...\u89E3\u6C7A\u5F8C, unresolved: true };
+  });
+}
+function resolveMindData(data, values) {
+  const \u8AAD\u3080 = data.rootTitle.includes("{") || data.branches.some((b) => b.title.includes("{"));
+  if (!\u8AAD\u3080) return data;
+  const root = resolveBoundText(data.rootTitle, values);
+  const branches = data.branches.map((b) => {
+    const title = resolveBoundText(b.title, values);
+    const \u89E3\u6C7A\u5F8C2 = { ...b, title: title.value };
+    return title.ok ? \u89E3\u6C7A\u5F8C2 : { ...\u89E3\u6C7A\u5F8C2, unresolved: true };
+  });
+  const \u89E3\u6C7A\u5F8C = { ...data, rootTitle: root.value, branches };
+  return root.ok ? \u89E3\u6C7A\u5F8C : { ...\u89E3\u6C7A\u5F8C, unresolved: true };
+}
 function ChartLineNode({
   node,
   active,
@@ -6992,10 +7017,14 @@ function toneColor3(tone) {
 }
 var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
 var MIND_BOX_GAP = 24;
-function MindMapNode({ node, active }) {
+function MindMapNode({
+  node,
+  active,
+  stateValues = {}
+}) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const mindData = node.mindData;
+  const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : void 0;
   if (!mindData) return /* @__PURE__ */ jsx("g", { transform: `translate(${x0} ${y0})` });
   const PAD = 40;
   const canvasCx = node.w / 2;
@@ -7031,7 +7060,7 @@ function MindMapNode({ node, active }) {
       },
       `edge-${i}`
     )),
-    layout2.nodes.map((n) => /* @__PURE__ */ jsxs("g", { children: [
+    layout2.nodes.map((n) => /* @__PURE__ */ jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
       /* @__PURE__ */ jsx(
         "rect",
         {
@@ -7072,7 +7101,8 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
     y: cy,
     w: rootW,
     h: rootH,
-    isRoot: true
+    isRoot: true,
+    ...mindData.unresolved ? { unresolved: true } : {}
   });
   const childrenOf = /* @__PURE__ */ new Map();
   for (const br of mindData.branches) {
@@ -7175,7 +7205,17 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
       );
       y = (ys[0] + ys[ys.length - 1]) / 2;
     }
-    nodes.push({ id: node.id, title: node.title, x, y, w, h, tone: myTone, isRoot: false });
+    nodes.push({
+      id: node.id,
+      title: node.title,
+      x,
+      y,
+      w,
+      h,
+      tone: myTone,
+      isRoot: false,
+      ...node.unresolved ? { unresolved: true } : {}
+    });
     nodePos.set(node.id, { x, y });
     nodeSide.set(node.id, isLeft ? "left" : "right");
     nodeHalfW.set(node.id, w / 2);
@@ -7495,10 +7535,14 @@ function QuadrantNode({
     })
   ] });
 }
-function TreeNode({ node, active }) {
+function TreeNode({
+  node,
+  active,
+  stateValues = {}
+}) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const treeNodes = node.treeData ?? [];
+  const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
   const gradientId = `tree-root-grad-${node.id}`;
   const PAD_TOP = 40;
   const PAD_RIGHT = 24;
@@ -7553,60 +7597,68 @@ function TreeNode({ node, active }) {
     layout2.nodes.map((n) => {
       const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0];
       const isRoot = n.depth === 0;
-      return /* @__PURE__ */ jsx("g", { transform: `translate(${PAD_LEFT + n.x - n.w / 2} ${PAD_TOP + n.y - n.h / 2})`, children: isRoot ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            "data-cdl-role": "tree-node",
-            x: 0,
-            y: 0,
-            width: n.w,
-            height: n.h,
-            rx: 12,
-            fill: `url(#${gradientId})`
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: n.w / 2,
-            y: n.h / 2 + 5,
-            fontSize: 13,
-            fontWeight: 700,
-            textAnchor: "middle",
-            fill: "var(--cdl-text-on-tone, #ffffff)",
-            children: n.title
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            "data-cdl-role": "tree-node",
-            x: 0,
-            y: 0,
-            width: n.w,
-            height: n.h,
-            rx: 9,
-            fill: "var(--cdl-chip-fill, #f4f6fb)",
-            stroke: accent,
-            strokeWidth: 1.5
-          }
-        ),
-        /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 4, height: n.h, rx: 2, fill: accent }),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: n.w / 2 + 2,
-            y: n.h / 2 + 4,
-            fontSize: 12,
-            fontWeight: 600,
-            textAnchor: "middle",
-            fill: "var(--cdl-chip-text, #1a1f2a)",
-            children: n.title
-          }
-        )
-      ] }) }, `n-${n.id}`);
+      return /* @__PURE__ */ jsx(
+        "g",
+        {
+          "data-cdl-unresolved": n.unresolved ? "true" : void 0,
+          transform: `translate(${PAD_LEFT + n.x - n.w / 2} ${PAD_TOP + n.y - n.h / 2})`,
+          children: isRoot ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                "data-cdl-role": "tree-node",
+                x: 0,
+                y: 0,
+                width: n.w,
+                height: n.h,
+                rx: 12,
+                fill: `url(#${gradientId})`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: n.w / 2,
+                y: n.h / 2 + 5,
+                fontSize: 13,
+                fontWeight: 700,
+                textAnchor: "middle",
+                fill: "var(--cdl-text-on-tone, #ffffff)",
+                children: n.title
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                "data-cdl-role": "tree-node",
+                x: 0,
+                y: 0,
+                width: n.w,
+                height: n.h,
+                rx: 9,
+                fill: "var(--cdl-chip-fill, #f4f6fb)",
+                stroke: accent,
+                strokeWidth: 1.5
+              }
+            ),
+            /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 4, height: n.h, rx: 2, fill: accent }),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: n.w / 2 + 2,
+                y: n.h / 2 + 4,
+                fontSize: 12,
+                fontWeight: 600,
+                textAnchor: "middle",
+                fill: "var(--cdl-chip-text, #1a1f2a)",
+                children: n.title
+              }
+            )
+          ] })
+        },
+        `n-${n.id}`
+      );
     })
   ] });
 }
@@ -7669,7 +7721,16 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
     }
     const y = depth * depthGap + depthGap / 2;
     posOf.set(n.id, { x, y });
-    nodes.push({ id: n.id, title: n.title, x, y, w: nodeW, h: nodeH, depth });
+    nodes.push({
+      id: n.id,
+      title: n.title,
+      x,
+      y,
+      w: nodeW,
+      h: nodeH,
+      depth,
+      ...n.unresolved ? { unresolved: true } : {}
+    });
     return x;
   };
   for (const r of roots) if (!placed.has(r.id)) place(r, 0);
@@ -11818,9 +11879,10 @@ function CdlNodeView({
         return /* @__PURE__ */ jsx(EventNode, { node: resolvedNode, active, progress });
       case "card":
         return /* @__PURE__ */ jsx(CardNode, { node: resolvedNode, active });
-      // 図表 7 種は payload の数と語が `{signal}` を取れるので stateValues を渡す
-      // (`render/payload-binding.ts` が描画直前に解決する)。 動かさない 2 種
-      // (mind-map / tree-hierarchy) は構造だけを持つため渡さない。
+      // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
+      // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
+      // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
+      // 親子の繋がりと、描かれない欄 (補足) は解決しない。
       case "chart-line":
         return /* @__PURE__ */ jsx(ChartLineNode, { node: resolvedNode, active, stateValues });
       case "chart-pie":
@@ -11830,13 +11892,13 @@ function CdlNodeView({
       case "gantt-timeline":
         return /* @__PURE__ */ jsx(GanttNode, { node: resolvedNode, active, stateValues });
       case "mind-map":
-        return /* @__PURE__ */ jsx(MindMapNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(MindMapNode, { node: resolvedNode, active, stateValues });
       case "funnel-stages":
         return /* @__PURE__ */ jsx(FunnelNode, { node: resolvedNode, active, stateValues });
       case "quadrant-matrix":
         return /* @__PURE__ */ jsx(QuadrantNode, { node: resolvedNode, active, stateValues });
       case "tree-hierarchy":
-        return /* @__PURE__ */ jsx(TreeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(TreeNode, { node: resolvedNode, active, stateValues });
       case "journey-map":
         return /* @__PURE__ */ jsx(UserJourneyNode, { node: resolvedNode, active, stateValues });
       case "shape-file":