@cardenelabs/cdl 0.21.1 → 0.22.0

package/dist/react.js

@@ -846,6 +846,25 @@ function \u4E2D\u8EAB\u304B\u3089\u51FA\u3059\u9AD8\u3055(kind, \u6E80\u8F09h, \
   return Math.max(MIN_BOX_H, \u6E80\u8F09h - \u5F15\u304F);
 }
 var MIN_BOX_H = 44;
+var CLOUD_CIRCLES = [
+  { cx: -0.8, cy: -0.05 + 0.08, r: 0.32 },
+  { cx: -0.4, cy: -0.05 - 0.05, r: 0.4 },
+  { cx: 0, cy: -0.05 - 0.1, r: 0.46 },
+  { cx: 0.4, cy: -0.05 - 0.05, r: 0.4 },
+  { cx: 0.8, cy: -0.05 + 0.08, r: 0.32 }
+];
+var CLOUD_ART_CENTER_RISE = (() => {
+  const \u4E0A = Math.min(...CLOUD_CIRCLES.map((c) => c.cy - c.r));
+  const \u4E0B = Math.max(...CLOUD_CIRCLES.map((c) => c.cy + c.r));
+  return -(\u4E0A + \u4E0B) / 2;
+})();
+function \u4F59\u308A\u3092\u5206\u3051\u308B(kind, \u6E80\u8F09h, \u5B9F\u969B\u306Eh, \u4E2D\u8EAB) {
+  if (!\u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(kind, \u4E2D\u8EAB.hasRows)) return 0;
+  if (\u4E2D\u8EAB.hasValue) return 0;
+  const \u8981\u308B\u9AD8\u3055 = \u4E2D\u8EAB\u304B\u3089\u51FA\u3059\u9AD8\u3055(kind, \u6E80\u8F09h, \u4E2D\u8EAB);
+  const \u4F59\u308A = \u5B9F\u969B\u306Eh - \u8981\u308B\u9AD8\u3055;
+  return \u4F59\u308A > 0 ? Math.round(\u4F59\u308A / 2) : 0;
+}
 
 // src/layout/footer-shape.ts
 var SHAPE_DRAW_UP_EXTENT = {
@@ -6057,7 +6076,14 @@ function ActorNode({ node, active, value }) {
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
   const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("actor");
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86 - \u7E70\u308A\u4E0A\u3052, size: 32 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u4F59\u308A = \u4F59\u308A\u3092\u5206\u3051\u308B("actor", NODE_SIZE.actor.h, node.h, {
+    hasEyebrow: Boolean(node.eyebrow),
+    hasSubtitle: Boolean(node.subtitle),
+    hasValue: Boolean(value),
+    hasRows: false
+  });
+  const \u305A\u3089\u3057 = \u7E70\u308A\u4E0A\u3052 - \u4F59\u308A;
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86 - \u305A\u3089\u3057, size: 32 }, { hasEyebrow: Boolean(node.eyebrow) });
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x} ${y})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -6073,7 +6099,7 @@ function ActorNode({ node, active, value }) {
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
+    node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38 - \u4F59\u308A, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
     /* @__PURE__ */ jsx(
       "text",
       {
@@ -6092,13 +6118,13 @@ function ActorNode({ node, active, value }) {
       {
         "data-cdl-role": "node-row-divider",
         x1: 26,
-        y1: 110 - \u7E70\u308A\u4E0A\u3052,
+        y1: 110 - \u305A\u3089\u3057,
         x2: node.w - 26,
-        y2: 110 - \u7E70\u308A\u4E0A\u3052,
+        y2: 110 - \u305A\u3089\u3057,
         stroke: "var(--cdl-row-divider, #7e848e)"
       }
     ),
-    node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 140 - \u7E70\u308A\u4E0A\u3052, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 140 - \u305A\u3089\u3057, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
     value && /* @__PURE__ */ jsx(
       "text",
       {
@@ -6124,7 +6150,14 @@ function CardNode({ node, active }) {
   const compact = isCompactBox(node.h);
   const \u5C0F\u578B\u306B\u547C\u3073\u540D = compact && Boolean(node.subtitle);
   const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("card");
-  const titleY = compact ? \u5C0F\u578B\u306B\u547C\u3073\u540D ? node.h / 2 - 2 : node.h / 2 + 8 : 86 - \u7E70\u308A\u4E0A\u3052;
+  const \u4F59\u308A = compact ? 0 : \u4F59\u308A\u3092\u5206\u3051\u308B("card", NODE_SIZE.card.h, node.h, {
+    hasEyebrow: Boolean(node.eyebrow),
+    hasSubtitle: Boolean(node.subtitle),
+    hasValue: false,
+    hasRows: false
+  });
+  const \u305A\u3089\u3057 = \u7E70\u308A\u4E0A\u3052 - \u4F59\u308A;
+  const titleY = compact ? \u5C0F\u578B\u306B\u547C\u3073\u540D ? node.h / 2 - 2 : node.h / 2 + 8 : 86 - \u305A\u3089\u3057;
   const titleX = compact ? node.w / 2 : 26;
   const paddingX = compact ? 16 : 52;
   const availableW = node.w - paddingX;
@@ -6147,7 +6180,7 @@ function CardNode({ node, active }) {
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    !compact && node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
+    !compact && node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38 - \u4F59\u308A, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
     /* @__PURE__ */ jsx(
       "text",
       {
@@ -6161,7 +6194,7 @@ function CardNode({ node, active }) {
         children: node.title
       }
     ),
-    !compact && node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 124 - \u7E70\u308A\u4E0A\u3052, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    !compact && node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 124 - \u305A\u3089\u3057, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
     \u5C0F\u578B\u306B\u547C\u3073\u540D && /* @__PURE__ */ jsx(
       "text",
       {
@@ -6423,7 +6456,14 @@ function EventNode({
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
   const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("event");
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: 88 - \u7E70\u308A\u4E0A\u3052, size: 26 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u4F59\u308A = \u4F59\u308A\u3092\u5206\u3051\u308B("event", NODE_SIZE.event.h, node.h, {
+    hasEyebrow: Boolean(node.eyebrow),
+    hasSubtitle: Boolean(node.subtitle),
+    hasValue: false,
+    hasRows: false
+  });
+  const \u305A\u3089\u3057 = \u7E70\u308A\u4E0A\u3052 - \u4F59\u308A;
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: 88 - \u305A\u3089\u3057, size: 26 }, { hasEyebrow: Boolean(node.eyebrow) });
   const scale = active ? 0.78 + 0.22 * progress : 0.92;
   const opacity = active ? 0.5 + 0.5 * progress : 0.65;
   return /* @__PURE__ */ jsx(
@@ -6446,7 +6486,7 @@ function EventNode({
             strokeWidth: active ? 3 : 1.25
           }
         ),
-        node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
+        node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38 - \u4F59\u308A, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
         /* @__PURE__ */ jsx(
           "text",
           {
@@ -6465,7 +6505,7 @@ function EventNode({
           "text",
           {
             x: 26,
-            y: 128 - \u7E70\u308A\u4E0A\u3052,
+            y: 128 - \u305A\u3089\u3057,
             fontSize: 21,
             fill: "var(--cdl-text-dim, #5a6270)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
@@ -6482,7 +6522,14 @@ function FunctionNode({ node, active }) {
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
   const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("function");
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86 - \u7E70\u308A\u4E0A\u3052, size: 24 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u4F59\u308A = \u4F59\u308A\u3092\u5206\u3051\u308B("function", NODE_SIZE.function.h, node.h, {
+    hasEyebrow: Boolean(node.eyebrow),
+    hasSubtitle: Boolean(node.subtitle),
+    hasValue: false,
+    hasRows: false
+  });
+  const \u305A\u3089\u3057 = \u7E70\u308A\u4E0A\u3052 - \u4F59\u308A;
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86 - \u305A\u3089\u3057, size: 24 }, { hasEyebrow: Boolean(node.eyebrow) });
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x} ${y})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -6499,7 +6546,7 @@ function FunctionNode({ node, active }) {
         strokeOpacity: active ? 1 : 0.5
       }
     ),
-    node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
+    node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38 - \u4F59\u308A, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
     /* @__PURE__ */ jsx(
       "text",
       {
@@ -6514,7 +6561,7 @@ function FunctionNode({ node, active }) {
         children: node.title
       }
     ),
-    node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 126 - \u7E70\u308A\u4E0A\u3052, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 126 - \u305A\u3089\u3057, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
   ] });
 }
 var ROW_GLYPH_HALF = 7;
@@ -6853,21 +6900,12 @@ function GenericNode({
     if (shape === "cloud") {
       const cx = w / 2;
       const cy = h / 2;
-      const cloudCenterY = cy - h * 0.05;
-      const usableW = w * 0.85;
-      const halfW = usableW / 2;
-      const circles = [
-        { cx: cx - halfW * 0.8, cy: cloudCenterY + h * 0.08, r: h * 0.32 },
-        // 左端
-        { cx: cx - halfW * 0.4, cy: cloudCenterY - h * 0.05, r: h * 0.4 },
-        // 左
-        { cx, cy: cloudCenterY - h * 0.1, r: h * 0.46 },
-        // 中央 (最大)
-        { cx: cx + halfW * 0.4, cy: cloudCenterY - h * 0.05, r: h * 0.4 },
-        // 右
-        { cx: cx + halfW * 0.8, cy: cloudCenterY + h * 0.08, r: h * 0.32 }
-        // 右端
-      ];
+      const halfW = w * 0.85 / 2;
+      const circles = CLOUD_CIRCLES.map((c) => ({
+        cx: cx + halfW * c.cx,
+        cy: cy + h * c.cy,
+        r: h * c.r
+      }));
       return /* @__PURE__ */ jsxs("g", { children: [
         circles.map((c, i) => /* @__PURE__ */ jsx("circle", { cx: c.cx, cy: c.cy, r: c.r, fill: "var(--cdl-node-fill, #ffffff)" }, `fill-${i}`)),
         circles.map((c, i) => /* @__PURE__ */ jsx(
@@ -6906,11 +6944,19 @@ function GenericNode({
   const textX = centered ? w / 2 : 20;
   const cylinderShift = genericTextShift(node.kind);
   const \u7E70\u308A\u4E0A\u3052 = node.eyebrow || centered ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052(node.kind, hasRows);
-  const eyebrowY = centered ? h / 2 - 26 : 32 + cylinderShift;
-  const titleY = genericTitleBaselineY(node.kind, h, hasRows) - \u7E70\u308A\u4E0A\u3052;
-  const subtitleY = centered ? h / 2 + 28 : 96 + cylinderShift - \u7E70\u308A\u4E0A\u3052;
+  const \u4F59\u308A = centered ? 0 : \u4F59\u308A\u3092\u5206\u3051\u308B(node.kind, NODE_SIZE[node.kind]?.h ?? h, h, {
+    hasEyebrow: Boolean(node.eyebrow),
+    hasSubtitle: Boolean(node.subtitle),
+    hasValue: Boolean(resolvedValue),
+    hasRows
+  });
+  const \u305A\u3089\u3057 = \u7E70\u308A\u4E0A\u3052 - \u4F59\u308A;
+  const \u7D75\u306E\u82AF = centered && STYLES[node.kind]?.shape === "cloud" ? h * CLOUD_ART_CENTER_RISE : 0;
+  const eyebrowY = centered ? h / 2 - 26 - \u7D75\u306E\u82AF : 32 + cylinderShift + \u4F59\u308A;
+  const titleY = genericTitleBaselineY(node.kind, h, hasRows) - \u305A\u3089\u3057 - \u7D75\u306E\u82AF;
+  const subtitleY = centered ? h / 2 + 28 - \u7D75\u306E\u82AF : 96 + cylinderShift - \u305A\u3089\u3057;
   const iconX = centered ? w / 2 + 40 : w - 48;
-  const iconY = centered ? h / 2 - 44 : 18 + cylinderShift;
+  const iconY = centered ? h / 2 - 44 - \u7D75\u306E\u82AF : 18 + cylinderShift;
   const dominantBaseline = centered ? "middle" : void 0;
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x} ${y})`, "data-cdl-role": "node-body", children: [
     shapeEl,