@founderhq/journeys 0.3.64 → 0.3.66

package/dist/index.cjs

@@ -1197,19 +1197,225 @@ var renderTemplate = (template, variables, fallback) => {
 };
 
 // src/blocks/resolve-template.ts
-function resolveTemplate(template, answers) {
+var VALID_IDENTIFIER_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+var IDENTIFIER_TOKEN_RE = /[A-Za-z_$][A-Za-z0-9_$]*/g;
+var RESERVED_IDENTIFIERS = /* @__PURE__ */ new Set([
+  "arguments",
+  "await",
+  "break",
+  "case",
+  "catch",
+  "class",
+  "const",
+  "continue",
+  "debugger",
+  "default",
+  "delete",
+  "do",
+  "else",
+  "enum",
+  "eval",
+  "export",
+  "extends",
+  "false",
+  "finally",
+  "for",
+  "function",
+  "if",
+  "implements",
+  "import",
+  "in",
+  "instanceof",
+  "interface",
+  "let",
+  "new",
+  "null",
+  "package",
+  "private",
+  "protected",
+  "public",
+  "return",
+  "static",
+  "super",
+  "switch",
+  "this",
+  "throw",
+  "true",
+  "try",
+  "typeof",
+  "undefined",
+  "var",
+  "void",
+  "while",
+  "with",
+  "yield"
+]);
+var GLOBAL_IDENTIFIERS = /* @__PURE__ */ new Set([
+  "Array",
+  "BigInt",
+  "Boolean",
+  "Date",
+  "Error",
+  "Infinity",
+  "Intl",
+  "JSON",
+  "Map",
+  "Math",
+  "NaN",
+  "Number",
+  "Object",
+  "Promise",
+  "RegExp",
+  "Set",
+  "String",
+  "Symbol",
+  "URL",
+  "URLSearchParams",
+  "WeakMap",
+  "WeakSet",
+  "console",
+  "decodeURI",
+  "decodeURIComponent",
+  "encodeURI",
+  "encodeURIComponent",
+  "globalThis",
+  "isFinite",
+  "isNaN",
+  "parseFloat",
+  "parseInt"
+]);
+function previousNonWhitespace(value, index) {
+  for (let i = index - 1; i >= 0; i--) {
+    if (!/\s/.test(value[i])) return value[i];
+  }
+  return void 0;
+}
+function stripLiteralsAndComments(expression) {
+  let stripped = "";
+  let i = 0;
+  while (i < expression.length) {
+    const char = expression[i];
+    const next = expression[i + 1];
+    if (char === "/" && next === "/") {
+      stripped += "  ";
+      i += 2;
+      while (i < expression.length && expression[i] !== "\n") {
+        stripped += " ";
+        i++;
+      }
+      continue;
+    }
+    if (char === "/" && next === "*") {
+      stripped += "  ";
+      i += 2;
+      while (i < expression.length) {
+        const end = expression[i] === "*" && expression[i + 1] === "/";
+        stripped += " ";
+        i++;
+        if (end) {
+          stripped += " ";
+          i++;
+          break;
+        }
+      }
+      continue;
+    }
+    if (char === "'" || char === '"' || char === "`") {
+      const quote = char;
+      stripped += " ";
+      i++;
+      while (i < expression.length) {
+        const current = expression[i];
+        stripped += " ";
+        i++;
+        if (current === "\\") {
+          if (i < expression.length) {
+            stripped += " ";
+            i++;
+          }
+          continue;
+        }
+        if (current === quote) break;
+      }
+      continue;
+    }
+    stripped += char;
+    i++;
+  }
+  return stripped;
+}
+function extractTemplateExpressions(template) {
+  const expressions = [];
+  let i = 0;
+  while (i < template.length) {
+    if (template[i] !== "$" || template[i + 1] !== "{") {
+      i++;
+      continue;
+    }
+    let depth = 1;
+    let quote = null;
+    let escaped = false;
+    const start = i + 2;
+    i = start;
+    while (i < template.length) {
+      const char = template[i];
+      if (quote) {
+        if (escaped) {
+          escaped = false;
+        } else if (char === "\\") {
+          escaped = true;
+        } else if (char === quote) {
+          quote = null;
+        }
+        i++;
+        continue;
+      }
+      if (char === "'" || char === '"' || char === "`") {
+        quote = char;
+        i++;
+        continue;
+      }
+      if (char === "{") {
+        depth++;
+      } else if (char === "}") {
+        depth--;
+        if (depth === 0) {
+          expressions.push(template.slice(start, i));
+          i++;
+          break;
+        }
+      }
+      i++;
+    }
+  }
+  return expressions;
+}
+function collectTemplateVariables(expressions, answers) {
   var _a;
   const vars = {};
-  const regex = /\$\{(\w+)/g;
-  let match;
-  while ((match = regex.exec(template)) !== null) {
-    const key = match[1];
-    vars[key] = (_a = answers[key]) != null ? _a : void 0;
+  for (const expression of expressions) {
+    const stripped = stripLiteralsAndComments(expression);
+    IDENTIFIER_TOKEN_RE.lastIndex = 0;
+    let match;
+    while ((match = IDENTIFIER_TOKEN_RE.exec(stripped)) !== null) {
+      const key = match[0];
+      const isPropertyAccess = previousNonWhitespace(stripped, match.index) === ".";
+      if (isPropertyAccess || !VALID_IDENTIFIER_RE.test(key) || RESERVED_IDENTIFIERS.has(key) || GLOBAL_IDENTIFIERS.has(key) && !(key in answers)) {
+        continue;
+      }
+      vars[key] = (_a = answers[key]) != null ? _a : void 0;
+    }
   }
-  if (Object.keys(vars).length === 0) return template;
+  return vars;
+}
+function resolveTemplate(template, answers) {
+  if (!template.includes("${")) return template;
+  const expressions = extractTemplateExpressions(template);
+  if (expressions.length === 0) return template;
+  const vars = collectTemplateVariables(expressions, answers);
   return renderTemplate(template, vars, "");
 }
-var WHOLE_REF_RE = /^\$\{(\w+)\}$/;
+var WHOLE_REF_RE = /^\$\{([A-Za-z_$][A-Za-z0-9_$]*)\}$/;
 function resolveStringField(value, answers) {
   const wholeRef = value.match(WHOLE_REF_RE);
   if (wholeRef) {
@@ -1268,7 +1474,7 @@ function RadioGroupItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "radio-group-item",
       className: cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,border-color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       )
     }, props), {
@@ -1646,7 +1852,7 @@ function SingleSelectWidget({
                 RadioGroupItem,
                 {
                   value: opt.id,
-                  className: isGrid ? "sr-only" : "mt-1"
+                  className: isGrid ? "sr-only" : opt.description ? "mt-1" : ""
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3716,16 +3922,17 @@ function ChecklistItemRow({
   animate: animate2,
   entranceDelay
 }) {
+  var _a, _b;
   const hasLoadSequence = item.loadDelay != null && !item.checked;
   const uid = sanitizeSvgId(React.useId());
   const gradientId = `checklist-grad-${uid}-${index}`;
   const initialPhase = item.checked ? "checked" : "unchecked";
   const [phase, setPhase] = React.useState(initialPhase);
   React.useEffect(() => {
-    var _a;
+    var _a2;
     if (!hasLoadSequence) return;
     const loadDelay = item.loadDelay * 1e3;
-    const loadDuration = ((_a = item.loadDuration) != null ? _a : 4) * 1e3;
+    const loadDuration = ((_a2 = item.loadDuration) != null ? _a2 : 4) * 1e3;
     const loadTimer = setTimeout(() => setPhase("loading"), loadDelay);
     const checkTimer = setTimeout(
       () => setPhase("checked"),
@@ -3739,6 +3946,8 @@ function ChecklistItemRow({
   const CustomIcon = item.icon ? lucideIcons7[item.icon] : void 0;
   const IconComp = CustomIcon && ("render" in CustomIcon || typeof CustomIcon === "function") ? CustomIcon : icons.Check;
   const hasCustomIcon = IconComp !== icons.Check;
+  const textContent = (_b = (_a = item.segments) != null ? _a : item.text) != null ? _b : "";
+  const textStyle = item.textColor || item.lineHeight != null ? { color: item.textColor, lineHeight: item.lineHeight } : void 0;
   const iconProps = item.iconGradient ? { stroke: `url(#${gradientId})` } : item.iconColor ? { color: item.iconColor } : {};
   const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3801,13 +4010,14 @@ function ChecklistItemRow({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+      RichText,
       {
+        content: textContent,
         className: cn(
           "text-sm transition-colors duration-300",
           phase === "checked" ? "text-foreground" : "text-muted-foreground"
         ),
-        children: item.text
+        style: textStyle
       }
     )
   ] });
@@ -4153,6 +4363,9 @@ function CircularProgressBlock({
   );
 }
 var lucideIcons8 = icons__namespace;
+var DEFAULT_CHART_HEIGHT = 280;
+var DEFAULT_Y_AXIS_LABEL_GUTTER = 64;
+var Y_AXIS_LABEL_GAP = 8;
 function toSvg(points, w, h, pad) {
   const drawW = w - pad.left - pad.right;
   const drawH = h - pad.top - pad.bottom;
@@ -4218,10 +4431,36 @@ function xValToPercent(xVal, svgW, pad) {
   const drawW = svgW - pad.left - pad.right;
   return (pad.left + xVal / 100 * drawW) / svgW * 100;
 }
+function toCssLength(value, fallback) {
+  if (value === void 0) return fallback;
+  if (typeof value === "number") {
+    return Number.isFinite(value) && value > 0 ? `${value}px` : fallback;
+  }
+  const trimmed = value.trim();
+  if (!trimmed) return fallback;
+  return /^-?\d+(\.\d+)?$/.test(trimmed) ? `${trimmed}px` : trimmed;
+}
+function toViewBoxHeight(value) {
+  if (typeof value === "number" && Number.isFinite(value) && value > 0) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const match = value.trim().match(/^(\d+(?:\.\d+)?)(?:px)?$/i);
+    if (match) {
+      const parsed = Number(match[1]);
+      if (Number.isFinite(parsed) && parsed > 0) return parsed;
+    }
+  }
+  return DEFAULT_CHART_HEIGHT;
+}
+function toPositiveNumber(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
+}
 function LineChartBlock({
   lines = [],
   width = "100%",
   height = 280,
+  yLabelGutter,
   yLabels,
   xLabels,
   animationDuration = 1.5,
@@ -4236,12 +4475,19 @@ function LineChartBlock({
   const [animate2, setAnimate] = React.useState(false);
   const pathRefs = React.useRef([]);
   const dotRefs = React.useRef([]);
-  const svgH = height;
+  const svgH = toViewBoxHeight(height);
+  const chartWidth = toCssLength(width, "100%");
+  const chartHeight = toCssLength(height, `${DEFAULT_CHART_HEIGHT}px`);
   const hasEndLabels = lines.some((l) => l.endLabel || l.endIcon);
   const hasEndDots = lines.some((l) => l.endDot);
   const hasYLabels = !!((yLabels == null ? void 0 : yLabels.top) || (yLabels == null ? void 0 : yLabels.bottom));
   const padRight = hasEndDots ? 80 : hasEndLabels ? 60 : 16;
-  const pad = { top: 16, right: padRight, bottom: 16, left: hasYLabels ? 48 : 16 };
+  const pad = {
+    top: 16,
+    right: padRight,
+    bottom: 16,
+    left: hasYLabels ? toPositiveNumber(yLabelGutter, DEFAULT_Y_AXIS_LABEL_GUTTER) : 16
+  };
   React.useEffect(() => {
     const timer = setTimeout(() => setAnimate(true), startDelay * 1e3);
     return () => clearTimeout(timer);
@@ -4256,6 +4502,7 @@ function LineChartBlock({
   });
   const durationMs = animationDuration * 1e3;
   const hasDots = lines.some((l) => l.endDot);
+  const yAxisLabelWidth = `max(0px, calc(${pad.left / svgW * 100}% - ${Y_AXIS_LABEL_GAP}px))`;
   React.useEffect(() => {
     if (!animate2 || !hasDots) return;
     const startTime = performance.now();
@@ -4281,299 +4528,329 @@ function LineChartBlock({
     return () => cancelAnimationFrame(rafId);
   }, [animate2, hasDots, durationMs, svgW, svgH]);
   const toPctY = (px) => `${px / svgH * 100}%`;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full overflow-visible", className), style: { width }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "relative overflow-visible",
-        style: { aspectRatio: `5 / 4`, minHeight: 220 },
-        children: [
-          (yLabels == null ? void 0 : yLabels.top) && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "absolute left-0 text-xs font-medium",
-              style: {
-                top: toPctY(
-                  yLabels.topAt != null ? yValToPixel(yLabels.topAt, svgH, pad) : pad.top
-                ),
-                transform: "translateY(-50%)",
-                color: labelColor
-              },
-              children: yLabels.top
-            }
-          ),
-          (yLabels == null ? void 0 : yLabels.bottom) && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "absolute left-0 text-xs font-medium",
-              style: {
-                top: toPctY(
-                  yLabels.bottomAt != null ? yValToPixel(yLabels.bottomAt, svgH, pad) : svgH - pad.bottom
-                ),
-                transform: "translateY(-50%)",
-                color: labelColor
-              },
-              children: yLabels.bottom
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "svg",
-            {
-              viewBox: `0 0 ${svgW} ${svgH}`,
-              preserveAspectRatio: "none",
-              className: "w-full h-full",
-              style: { overflow: "visible" },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-                  linesData.map(
-                    (line, i) => {
+  const yAxisLabelStyle = (top) => ({
+    top,
+    left: 0,
+    width: yAxisLabelWidth,
+    maxWidth: yAxisLabelWidth,
+    transform: "translateY(-50%)",
+    color: labelColor,
+    textAlign: "right",
+    whiteSpace: "pre-line",
+    overflowWrap: "anywhere",
+    lineHeight: 1.1,
+    pointerEvents: "none"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("w-full overflow-visible", className),
+      style: { width: chartWidth },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "relative overflow-visible",
+            style: { height: chartHeight },
+            children: [
+              (yLabels == null ? void 0 : yLabels.top) && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute text-xs font-medium",
+                  style: yAxisLabelStyle(
+                    toPctY(
+                      yLabels.topAt != null ? yValToPixel(yLabels.topAt, svgH, pad) : pad.top
+                    )
+                  ),
+                  children: yLabels.top
+                }
+              ),
+              (yLabels == null ? void 0 : yLabels.bottom) && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute text-xs font-medium",
+                  style: yAxisLabelStyle(
+                    toPctY(
+                      yLabels.bottomAt != null ? yValToPixel(yLabels.bottomAt, svgH, pad) : svgH - pad.bottom
+                    )
+                  ),
+                  children: yLabels.bottom
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  viewBox: `0 0 ${svgW} ${svgH}`,
+                  preserveAspectRatio: "none",
+                  className: "w-full h-full",
+                  style: { overflow: "visible" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+                      linesData.map(
+                        (line, i) => {
+                          var _a2;
+                          return line.fill ? /* @__PURE__ */ jsxRuntime.jsxs(
+                            "linearGradient",
+                            {
+                              id: `lc-fill-${uid}-${i}`,
+                              x1: "0",
+                              y1: "0",
+                              x2: "0",
+                              y2: "1",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  "stop",
+                                  {
+                                    offset: "0%",
+                                    stopColor: line.fill.from,
+                                    stopOpacity: (_a2 = line.fill.opacity) != null ? _a2 : 0.4
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  "stop",
+                                  {
+                                    offset: "100%",
+                                    stopColor: line.fill.to,
+                                    stopOpacity: 0
+                                  }
+                                )
+                              ]
+                            },
+                            `fill-${i}`
+                          ) : null;
+                        }
+                      ),
+                      linesData.map(
+                        (line, i) => line.fill ? /* @__PURE__ */ jsxRuntime.jsxs(
+                          "linearGradient",
+                          {
+                            id: `lc-mask-grad-${uid}-${i}`,
+                            x1: "0",
+                            y1: "0",
+                            x2: "0",
+                            y2: "1",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "white" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "70%", stopColor: "white" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "black" })
+                            ]
+                          },
+                          `mask-${i}`
+                        ) : null
+                      ),
+                      linesData.map(
+                        (line, i) => line.fill ? /* @__PURE__ */ jsxRuntime.jsx("mask", { id: `lc-mask-${uid}-${i}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "rect",
+                          {
+                            x: "0",
+                            y: animate2 ? "0" : `-${svgH}`,
+                            width: svgW,
+                            height: svgH,
+                            fill: `url(#lc-mask-grad-${uid}-${i})`,
+                            style: {
+                              transition: `y ${durationMs}ms cubic-bezier(0.25, 0.4, 0.25, 1)`
+                            }
+                          }
+                        ) }, `mask-el-${i}`) : null
+                      )
+                    ] }),
+                    showGrid && [25, 50, 75].map((pct) => {
+                      const y = pad.top + (100 - pct) / 100 * (svgH - pad.top - pad.bottom);
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "line",
+                        {
+                          x1: pad.left,
+                          y1: y,
+                          x2: svgW - pad.right,
+                          y2: y,
+                          stroke: axisColor,
+                          strokeWidth: 0.5,
+                          strokeDasharray: "4 4"
+                        },
+                        pct
+                      );
+                    }),
+                    linesData.map(
+                      (line, i) => line.fillDPath ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          d: line.fillDPath,
+                          fill: `url(#lc-fill-${uid}-${i})`,
+                          mask: `url(#lc-mask-${uid}-${i})`
+                        },
+                        `area-${i}`
+                      ) : null
+                    ),
+                    linesData.map((line, i) => {
                       var _a2;
-                      return line.fill ? /* @__PURE__ */ jsxRuntime.jsxs(
-                        "linearGradient",
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
                         {
-                          id: `lc-fill-${uid}-${i}`,
-                          x1: "0",
-                          y1: "0",
-                          x2: "0",
-                          y2: "1",
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "stop",
-                              {
-                                offset: "0%",
-                                stopColor: line.fill.from,
-                                stopOpacity: (_a2 = line.fill.opacity) != null ? _a2 : 0.4
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "stop",
-                              {
-                                offset: "100%",
-                                stopColor: line.fill.to,
-                                stopOpacity: 0
-                              }
-                            )
-                          ]
+                          ref: (el) => {
+                            pathRefs.current[i] = el;
+                          },
+                          d: line.lineDPath,
+                          fill: "none",
+                          stroke: line.color,
+                          strokeWidth: (_a2 = line.strokeWidth) != null ? _a2 : 3,
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          pathLength: 1,
+                          style: line.dashed ? {
+                            strokeDasharray: "8 6",
+                            opacity: animate2 ? 1 : 0,
+                            transition: `opacity ${durationMs}ms ease`
+                          } : {
+                            strokeDasharray: 1,
+                            strokeDashoffset: animate2 ? 0 : 1,
+                            transition: `stroke-dashoffset ${durationMs}ms cubic-bezier(0.25, 0.4, 0.25, 1)`
+                          }
                         },
-                        `fill-${i}`
-                      ) : null;
-                    }
-                  ),
-                  linesData.map(
-                    (line, i) => line.fill ? /* @__PURE__ */ jsxRuntime.jsxs(
-                      "linearGradient",
+                        `line-${i}`
+                      );
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
                       {
-                        id: `lc-mask-grad-${uid}-${i}`,
-                        x1: "0",
-                        y1: "0",
-                        x2: "0",
-                        y2: "1",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "white" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "70%", stopColor: "white" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "black" })
-                        ]
-                      },
-                      `mask-${i}`
-                    ) : null
-                  ),
-                  linesData.map(
-                    (line, i) => line.fill ? /* @__PURE__ */ jsxRuntime.jsx("mask", { id: `lc-mask-${uid}-${i}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "rect",
+                        x1: pad.left,
+                        y1: pad.top,
+                        x2: pad.left,
+                        y2: svgH - pad.bottom,
+                        stroke: axisColor,
+                        strokeWidth: 2
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
                       {
-                        x: "0",
-                        y: animate2 ? "0" : `-${svgH}`,
-                        width: svgW,
-                        height: svgH,
-                        fill: `url(#lc-mask-grad-${uid}-${i})`,
-                        style: {
-                          transition: `y ${durationMs}ms cubic-bezier(0.25, 0.4, 0.25, 1)`
-                        }
+                        x1: pad.left,
+                        y1: svgH - pad.bottom,
+                        x2: svgW - pad.right,
+                        y2: svgH - pad.bottom,
+                        stroke: axisColor,
+                        strokeWidth: 2
                       }
-                    ) }, `mask-el-${i}`) : null
-                  )
-                ] }),
-                showGrid && [25, 50, 75].map((pct) => {
-                  const y = pad.top + (100 - pct) / 100 * (svgH - pad.top - pad.bottom);
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    "line",
-                    {
-                      x1: pad.left,
-                      y1: y,
-                      x2: svgW - pad.right,
-                      y2: y,
-                      stroke: axisColor,
-                      strokeWidth: 0.5,
-                      strokeDasharray: "4 4"
+                    )
+                  ]
+                }
+              ),
+              linesData.map((line, i) => {
+                var _a2, _b2, _c, _d, _e;
+                if (!line.endDot) return null;
+                const dotSize = (_a2 = line.endDot.size) != null ? _a2 : 28;
+                const iconSize = dotSize * 0.55;
+                const imageScale = typeof line.endDot.imageScale === "number" && Number.isFinite(line.endDot.imageScale) ? Math.min(Math.max(line.endDot.imageScale, 0), 1) : 0.72;
+                const imageSize = dotSize * imageScale;
+                const LucideIcon = line.endDot.lucideIcon ? lucideIcons8[line.endDot.lucideIcon] : null;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: (el) => {
+                      dotRefs.current[i] = el;
                     },
-                    pct
-                  );
-                }),
-                linesData.map(
-                  (line, i) => line.fillDPath ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      d: line.fillDPath,
-                      fill: `url(#lc-fill-${uid}-${i})`,
-                      mask: `url(#lc-mask-${uid}-${i})`
+                    className: "absolute flex items-center justify-center rounded-full shadow-lg",
+                    style: {
+                      width: dotSize,
+                      height: dotSize,
+                      background: line.endDot.gradient ? `linear-gradient(${(_b2 = line.endDot.gradient.angle) != null ? _b2 : 180}deg, ${line.endDot.gradient.from}, ${line.endDot.gradient.to})` : (_c = line.endDot.color) != null ? _c : line.color,
+                      transform: "translate(-50%, -50%)",
+                      opacity: 0,
+                      left: 0,
+                      top: 0,
+                      zIndex: 10
                     },
-                    `area-${i}`
-                  ) : null
-                ),
-                linesData.map((line, i) => {
-                  var _a2;
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      ref: (el) => {
-                        pathRefs.current[i] = el;
-                      },
-                      d: line.lineDPath,
-                      fill: "none",
-                      stroke: line.color,
-                      strokeWidth: (_a2 = line.strokeWidth) != null ? _a2 : 3,
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      pathLength: 1,
-                      style: line.dashed ? {
-                        strokeDasharray: "8 6",
-                        opacity: animate2 ? 1 : 0,
-                        transition: `opacity ${durationMs}ms ease`
-                      } : {
-                        strokeDasharray: 1,
-                        strokeDashoffset: animate2 ? 0 : 1,
-                        transition: `stroke-dashoffset ${durationMs}ms cubic-bezier(0.25, 0.4, 0.25, 1)`
+                    children: line.endDot.imageSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: line.endDot.imageSrc,
+                        alt: (_d = line.endDot.imageAlt) != null ? _d : "",
+                        draggable: false,
+                        className: "rounded-full object-contain",
+                        style: {
+                          width: imageSize,
+                          height: imageSize
+                        }
                       }
-                    },
-                    `line-${i}`
-                  );
-                }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "line",
-                  {
-                    x1: pad.left,
-                    y1: pad.top,
-                    x2: pad.left,
-                    y2: svgH - pad.bottom,
-                    stroke: axisColor,
-                    strokeWidth: 2
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "line",
+                    ) : LucideIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+                      LucideIcon,
+                      {
+                        size: iconSize,
+                        color: (_e = line.endDot.lucideIconColor) != null ? _e : "#fff",
+                        strokeWidth: 2.5
+                      }
+                    ) : line.endDot.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: iconSize, lineHeight: 1 }, children: line.endDot.icon }) : null
+                  },
+                  `dot-${i}`
+                );
+              }),
+              linesData.map((line, i) => {
+                var _a2, _b2, _c, _d, _e, _f, _g;
+                if (!line.endIcon && !line.endLabel) return null;
+                const cx = line.lastPt[0];
+                const cy = line.lastPt[1];
+                const labelLines = (_b2 = (_a2 = line.endLabel) == null ? void 0 : _a2.split("\n")) != null ? _b2 : [];
+                const hasDot = !!line.endDot;
+                const offX = (_d = (_c = line.endLabelOffset) == null ? void 0 : _c.x) != null ? _d : 0;
+                const offY = (_f = (_e = line.endLabelOffset) == null ? void 0 : _e.y) != null ? _f : 0;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
                   {
-                    x1: pad.left,
-                    y1: svgH - pad.bottom,
-                    x2: svgW - pad.right,
-                    y2: svgH - pad.bottom,
-                    stroke: axisColor,
-                    strokeWidth: 2
-                  }
-                )
-              ]
+                    className: "absolute flex flex-col items-center",
+                    style: __spreadProps(__spreadValues({}, hasDot ? {
+                      left: `calc(${cx / svgW * 100}% + ${offX}px)`,
+                      transform: "translateX(-50%)"
+                    } : { right: 0 }), {
+                      top: toPctY(cy + offY),
+                      opacity: animate2 ? 1 : 0,
+                      transition: `opacity 400ms ease ${durationMs * 0.8}ms`,
+                      textAlign: "center",
+                      whiteSpace: "nowrap"
+                    }),
+                    children: [
+                      line.endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: line.endIcon }),
+                      labelLines.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "text-xs font-semibold leading-tight",
+                          style: { color: (_g = line.endLabelColor) != null ? _g : labelColor },
+                          children: labelLines.map((ln, j) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block", children: ln }, j))
+                        }
+                      )
+                    ]
+                  },
+                  `end-${i}`
+                );
+              })
+            ]
+          }
+        ),
+        xLabels && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative text-xs font-medium mt-1", style: { color: labelColor, height: 20 }, children: [
+          xLabels.left && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute",
+              style: {
+                left: `${xValToPercent((_a = xLabels.leftAt) != null ? _a : 0, svgW, pad)}%`,
+                transform: "translateX(-50%)"
+              },
+              children: xLabels.left
             }
           ),
-          linesData.map((line, i) => {
-            var _a2, _b2, _c, _d;
-            if (!line.endDot) return null;
-            const dotSize = (_a2 = line.endDot.size) != null ? _a2 : 28;
-            const iconSize = dotSize * 0.55;
-            const LucideIcon = line.endDot.lucideIcon ? lucideIcons8[line.endDot.lucideIcon] : null;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                ref: (el) => {
-                  dotRefs.current[i] = el;
-                },
-                className: "absolute flex items-center justify-center rounded-full shadow-lg",
-                style: {
-                  width: dotSize,
-                  height: dotSize,
-                  background: line.endDot.gradient ? `linear-gradient(${(_b2 = line.endDot.gradient.angle) != null ? _b2 : 180}deg, ${line.endDot.gradient.from}, ${line.endDot.gradient.to})` : (_c = line.endDot.color) != null ? _c : line.color,
-                  transform: "translate(-50%, -50%)",
-                  opacity: 0,
-                  left: 0,
-                  top: 0,
-                  zIndex: 10
-                },
-                children: LucideIcon ? /* @__PURE__ */ jsxRuntime.jsx(
-                  LucideIcon,
-                  {
-                    size: iconSize,
-                    color: (_d = line.endDot.lucideIconColor) != null ? _d : "#fff",
-                    strokeWidth: 2.5
-                  }
-                ) : line.endDot.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: iconSize, lineHeight: 1 }, children: line.endDot.icon }) : null
-              },
-              `dot-${i}`
-            );
-          }),
-          linesData.map((line, i) => {
-            var _a2, _b2, _c, _d, _e, _f, _g;
-            if (!line.endIcon && !line.endLabel) return null;
-            const cx = line.lastPt[0];
-            const cy = line.lastPt[1];
-            const labelLines = (_b2 = (_a2 = line.endLabel) == null ? void 0 : _a2.split("\n")) != null ? _b2 : [];
-            const hasDot = !!line.endDot;
-            const offX = (_d = (_c = line.endLabelOffset) == null ? void 0 : _c.x) != null ? _d : 0;
-            const offY = (_f = (_e = line.endLabelOffset) == null ? void 0 : _e.y) != null ? _f : 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "absolute flex flex-col items-center",
-                style: __spreadProps(__spreadValues({}, hasDot ? {
-                  left: `calc(${cx / svgW * 100}% + ${offX}px)`,
-                  transform: "translateX(-50%)"
-                } : { right: 0 }), {
-                  top: toPctY(cy + offY),
-                  opacity: animate2 ? 1 : 0,
-                  transition: `opacity 400ms ease ${durationMs * 0.8}ms`,
-                  textAlign: "center",
-                  whiteSpace: "nowrap"
-                }),
-                children: [
-                  line.endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: line.endIcon }),
-                  labelLines.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: "text-xs font-semibold leading-tight",
-                      style: { color: (_g = line.endLabelColor) != null ? _g : labelColor },
-                      children: labelLines.map((ln, j) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block", children: ln }, j))
-                    }
-                  )
-                ]
+          xLabels.right && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute",
+              style: {
+                left: `${xValToPercent((_b = xLabels.rightAt) != null ? _b : 100, svgW, pad)}%`,
+                transform: "translateX(-50%)"
               },
-              `end-${i}`
-            );
-          })
-        ]
-      }
-    ),
-    xLabels && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative text-xs font-medium mt-1", style: { color: labelColor, height: 20 }, children: [
-      xLabels.left && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "absolute",
-          style: {
-            left: `${xValToPercent((_a = xLabels.leftAt) != null ? _a : 0, svgW, pad)}%`,
-            transform: "translateX(-50%)"
-          },
-          children: xLabels.left
-        }
-      ),
-      xLabels.right && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "absolute",
-          style: {
-            left: `${xValToPercent((_b = xLabels.rightAt) != null ? _b : 100, svgW, pad)}%`,
-            transform: "translateX(-50%)"
-          },
-          children: xLabels.right
-        }
-      )
-    ] })
-  ] });
+              children: xLabels.right
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 function getInitials2(name) {
   return name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
@@ -5560,6 +5837,7 @@ function TimelineBlock({
     } : {};
     const renderNodeIcon = iconPlacement === "node" && item.icon;
     const renderContentIcon = iconPlacement === "content" && item.icon;
+    const renderTitleIcon = iconPlacement === "before-title" && item.icon;
     const showLabel = labelPlacement === "above" && item.label;
     const showOutgoing = !isLast || !!(endLine == null ? void 0 : endLine.show);
     const outgoingColor = isLast ? resolveColor((_a2 = endLine == null ? void 0 : endLine.color) != null ? _a2 : lineColor, blockLineValue) : resolveColor((_b = item.lineColor) != null ? _b : lineColor, blockLineValue);
@@ -5575,6 +5853,45 @@ function TimelineBlock({
     const defaultItemSpacing = Math.max(16, nodeSize * 0.4);
     const bottomPad = isLast ? (endLine == null ? void 0 : endLine.show) ? EDGE_LINE_HEIGHT : 0 : itemSpacing != null ? itemSpacing : defaultItemSpacing;
     const nodeTopMargin = iconPlacement === "node" ? 0 : 4;
+    const contentBody = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      renderContentIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1.5", children: renderIcon3(item.icon) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: iconPlacement === "node" ? {
+            minHeight: nodeSize,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center"
+          } : void 0,
+          children: [
+            showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-muted-foreground/70 uppercase tracking-wider", children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h4",
+              {
+                className: cn(
+                  "font-semibold text-foreground",
+                  iconPlacement === "node" ? "text-xl leading-tight" : "text-sm",
+                  renderTitleIcon ? "flex items-center gap-2" : null
+                ),
+                children: renderTitleIcon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: renderIcon3(item.icon) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: item.title })
+                ] }) : item.title
+              }
+            )
+          ]
+        }
+      ),
+      item.description && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "text-sm text-muted-foreground",
+          style: { marginTop: resolvedTitleDescGap },
+          children: item.description
+        }
+      )
+    ] });
     return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, __spreadProps(__spreadValues({ className: "relative flex" }, animProps), { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -5638,46 +5955,19 @@ function TimelineBlock({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: "flex-1 min-w-0",
           style: { paddingBottom: bottomPad, paddingTop: isFirst && showIncoming ? EDGE_LINE_HEIGHT : 0, paddingLeft: contentGap },
-          children: [
-            renderContentIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1.5", children: renderIcon3(item.icon) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: iconPlacement === "node" ? {
-                  minHeight: nodeSize,
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center"
-                } : void 0,
-                children: [
-                  showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-muted-foreground/70 uppercase tracking-wider", children: item.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "h4",
-                    {
-                      className: cn(
-                        "font-semibold text-foreground",
-                        iconPlacement === "node" ? "text-xl leading-tight" : "text-sm"
-                      ),
-                      children: item.title
-                    }
-                  )
-                ]
-              }
-            ),
-            item.description && /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: "text-sm text-muted-foreground",
-                style: { marginTop: resolvedTitleDescGap },
-                children: item.description
-              }
-            )
-          ]
+          children: item.contentCard ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "rounded-lg border border-border/60 bg-card/80 p-3 shadow-sm",
+              "data-timeline-content-card": "true",
+              children: contentBody
+            }
+          ) : contentBody
         }
       )
     ] }), i);