@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/run-step-timeline/index.js

@@ -3,7 +3,7 @@ var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/run-step-timeline/run-step-timeline.svelte
-import * as $6 from "svelte/internal/server";
+import * as $7 from "svelte/internal/server";
 
 // src/utilities/class-names.ts
 function classNames(...parts) {
@@ -14,25 +14,92 @@ function classNames(...parts) {
 import * as $ from "svelte/internal/server";
 function Badge($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
+    const subscriptionStateConfigurations = {
+      active: { variant: "success", label: "Active" },
+      trialing: { variant: "info", label: "Trialing" },
+      "past-due": { variant: "warning", label: "Past due" },
+      canceled: { variant: "neutral", label: "Canceled" },
+      expired: { variant: "danger", label: "Expired" },
+      refunded: { variant: "neutral", label: "Refunded" }
+    };
+    const subscriptionStateIconPaths = {
+      active: ["M21.801 10A10 10 0 1 1 17 3.335", "m9 11 3 3L22 4"],
+      trialing: ["M12 6v6l4 2", "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"],
+      "past-due": [
+        "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
+        "M12 9v4",
+        "M12 17h.01"
+      ],
+      canceled: [
+        "M15 9 9 15",
+        "M9 9l6 6",
+        "M22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10Z"
+      ],
+      expired: [
+        "M8 2v4",
+        "M16 2v4",
+        "M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",
+        "M3 10h18",
+        "m17 14-5-5",
+        "m12 14 5 5"
+      ],
+      refunded: [
+        "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+        "M3 3v5h5"
+      ]
+    };
     let {
       variant = "neutral",
       size = "md",
       mono = false,
+      subscriptionState,
       class: customClassName,
       children,
       $$slots,
       $$events,
       ...rest
     } = $$props;
+    const subscriptionStateConfiguration = $.derived(() => subscriptionState === undefined ? undefined : subscriptionStateConfigurations[subscriptionState]);
+    const resolvedVariant = $.derived(() => subscriptionStateConfiguration()?.variant ?? variant);
+    const resolvedSubscriptionIconPaths = $.derived(() => subscriptionState === undefined ? undefined : subscriptionStateIconPaths[subscriptionState]);
     $$renderer2.push(`<span${$.attributes({
       class: $.clsx(classNames("cinder-badge", customClassName)),
-      "data-cinder-variant": variant,
+      "data-cinder-variant": resolvedVariant(),
       "data-cinder-size": size,
       "data-cinder-mono": mono ? "" : undefined,
+      "data-cinder-subscription-state": subscriptionState,
       ...rest
     })}>`);
-    children?.($$renderer2);
-    $$renderer2.push(`<!----></span>`);
+    if (subscriptionStateConfiguration()) {
+      $$renderer2.push("<!--[0-->");
+      if (resolvedSubscriptionIconPaths()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><!--[-->`);
+        const each_array = $.ensure_array_like(resolvedSubscriptionIconPaths());
+        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+          let iconPath = each_array[$$index];
+          $$renderer2.push(`<path${$.attr("d", iconPath)}></path>`);
+        }
+        $$renderer2.push(`<!--]--></svg>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`${$.escape(subscriptionStateConfiguration().label)}`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      children?.($$renderer2);
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]--></span>`);
   });
 }
 
@@ -63,7 +130,7 @@ function Collapsible($$renderer, $$props) {
       trigger,
       children,
       open = false,
-      onToggle,
+      ontoggle,
       disabled = false,
       idBase,
       class: className,
@@ -82,7 +149,7 @@ function Collapsible($$renderer, $$props) {
         return;
       const next = !open;
       open = next;
-      onToggle?.(next);
+      ontoggle?.(next);
     }
     $$renderer2.push(`<div${$3.attributes({
       ...rest,
@@ -112,8 +179,87 @@ function Collapsible($$renderer, $$props) {
   });
 }
 
-// src/components/progress/progress.svelte
+// src/components/link/link.svelte
 import * as $4 from "svelte/internal/server";
+function Link($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      href,
+      underline = "hover",
+      color = "primary",
+      external = false,
+      disabled = false,
+      target,
+      rel,
+      tabindex,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const spanAttributes = $4.derived(() => rest);
+    const resolvedTarget = $4.derived(() => disabled ? undefined : external && !target ? "_blank" : target);
+    const resolvedRel = $4.derived(() => {
+      if (disabled)
+        return;
+      const needsSafeRel = external || resolvedTarget()?.toLowerCase() === "_blank";
+      const consumerParts = (rel ?? "").split(/\s+/).filter(Boolean);
+      const seen = new Set;
+      const merged = [];
+      for (const part of consumerParts) {
+        const key = part.toLowerCase();
+        if (!seen.has(key)) {
+          seen.add(key);
+          merged.push(part);
+        }
+      }
+      if (needsSafeRel) {
+        for (const part of ["noopener", "noreferrer"]) {
+          if (!seen.has(part)) {
+            seen.add(part);
+            merged.push(part);
+          }
+        }
+      }
+      return merged.length > 0 ? merged.join(" ") : undefined;
+    });
+    const resolvedClass = $4.derived(() => classNames("cinder-link", className));
+    if (disabled) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span${$4.attributes({
+        ...spanAttributes(),
+        class: $4.clsx(resolvedClass()),
+        "aria-disabled": "true",
+        "data-cinder-link": true,
+        "data-underline": underline,
+        "data-color": color,
+        "data-disabled": true
+      })}>`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<a${$4.attributes({
+        ...rest,
+        href,
+        tabindex,
+        target: resolvedTarget(),
+        rel: resolvedRel(),
+        class: $4.clsx(resolvedClass()),
+        "data-cinder-link": true,
+        "data-underline": underline,
+        "data-color": color
+      })}>`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></a>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+
+// src/components/progress/progress.svelte
+import * as $5 from "svelte/internal/server";
 
 // ../../node_modules/esm-env/false.js
 var false_default = false;
@@ -139,17 +285,17 @@ function Progress($$renderer, $$props) {
       ariaLabelledby,
       class: className
     } = $$props;
-    const effectiveMax = $4.derived(() => Number.isFinite(max) && max > 0 ? max : undefined);
-    const isIndeterminate = $4.derived(() => value === undefined || !Number.isFinite(value) || effectiveMax() === undefined);
-    const clampedValue = $4.derived(() => isIndeterminate() ? undefined : Math.max(0, Math.min(effectiveMax(), value)));
-    const percent = $4.derived(() => clampedValue() === undefined ? undefined : Math.round(clampedValue() / effectiveMax() * 100));
-    const valueText = $4.derived(() => label ?? (isIndeterminate() ? "Loading" : `${percent()}%`));
+    const effectiveMax = $5.derived(() => Number.isFinite(max) && max > 0 ? max : undefined);
+    const isIndeterminate = $5.derived(() => value === undefined || !Number.isFinite(value) || effectiveMax() === undefined);
+    const clampedValue = $5.derived(() => isIndeterminate() ? undefined : Math.max(0, Math.min(effectiveMax(), value)));
+    const percent = $5.derived(() => clampedValue() === undefined ? undefined : Math.round(clampedValue() / effectiveMax() * 100));
+    const valueText = $5.derived(() => label ?? (isIndeterminate() ? "Loading" : `${percent()}%`));
     if (variant === "ring") {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<div${$4.attr_class($4.clsx(classNames("cinder-progress", "cinder-progress--ring", className)))} role="progressbar"${$4.attr("aria-label", ariaLabel)}${$4.attr("aria-labelledby", ariaLabelledby)}${$4.attr("aria-valuemin", 0)}${$4.attr("aria-valuemax", effectiveMax())}${$4.attr("aria-valuenow", clampedValue())}${$4.attr("aria-valuetext", valueText())}${$4.attr("data-cinder-size", size)}${$4.attr("data-cinder-indeterminate", isIndeterminate() || undefined)}><svg viewBox="0 0 36 36" class="cinder-progress__svg" aria-hidden="true"><circle class="cinder-progress__track" cx="18" cy="18" r="16"></circle>`);
+      $$renderer2.push(`<div${$5.attr_class($5.clsx(classNames("cinder-progress", "cinder-progress--ring", className)))} role="progressbar"${$5.attr("aria-label", ariaLabel)}${$5.attr("aria-labelledby", ariaLabelledby)}${$5.attr("aria-valuemin", 0)}${$5.attr("aria-valuemax", effectiveMax())}${$5.attr("aria-valuenow", clampedValue())}${$5.attr("aria-valuetext", valueText())}${$5.attr("data-cinder-size", size)}${$5.attr("data-cinder-indeterminate", isIndeterminate() || undefined)}><svg viewBox="0 0 36 36" class="cinder-progress__svg" aria-hidden="true"><circle class="cinder-progress__track" cx="18" cy="18" r="16"></circle>`);
       if (!isIndeterminate()) {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<circle class="cinder-progress__fill" cx="18" cy="18" r="16"${$4.attr_style("", { "--_cinder-progress-percent": percent() })}></circle>`);
+        $$renderer2.push(`<circle class="cinder-progress__fill" cx="18" cy="18" r="16"${$5.attr_style("", { "--_cinder-progress-percent": percent() })}></circle>`);
       } else {
         $$renderer2.push("<!--[-1-->");
         $$renderer2.push(`<circle class="cinder-progress__fill cinder-progress__fill--indeterminate" cx="18" cy="18" r="16"></circle>`);
@@ -157,10 +303,10 @@ function Progress($$renderer, $$props) {
       $$renderer2.push(`<!--]--></svg></div>`);
     } else {
       $$renderer2.push("<!--[-1-->");
-      $$renderer2.push(`<div${$4.attr_class($4.clsx(classNames("cinder-progress", "cinder-progress--bar", className)))} role="progressbar"${$4.attr("aria-label", ariaLabel)}${$4.attr("aria-labelledby", ariaLabelledby)}${$4.attr("aria-valuemin", 0)}${$4.attr("aria-valuemax", effectiveMax())}${$4.attr("aria-valuenow", clampedValue())}${$4.attr("aria-valuetext", valueText())}${$4.attr("data-cinder-size", size)}${$4.attr("data-cinder-indeterminate", isIndeterminate() || undefined)}><div class="cinder-progress__track">`);
+      $$renderer2.push(`<div${$5.attr_class($5.clsx(classNames("cinder-progress", "cinder-progress--bar", className)))} role="progressbar"${$5.attr("aria-label", ariaLabel)}${$5.attr("aria-labelledby", ariaLabelledby)}${$5.attr("aria-valuemin", 0)}${$5.attr("aria-valuemax", effectiveMax())}${$5.attr("aria-valuenow", clampedValue())}${$5.attr("aria-valuetext", valueText())}${$5.attr("data-cinder-size", size)}${$5.attr("data-cinder-indeterminate", isIndeterminate() || undefined)}><div class="cinder-progress__track">`);
       if (!isIndeterminate()) {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<div class="cinder-progress__fill"${$4.attr_style("", { width: `${$4.stringify(percent())}%` })}></div>`);
+        $$renderer2.push(`<div class="cinder-progress__fill"${$5.attr_style("", { width: `${$5.stringify(percent())}%` })}></div>`);
       } else {
         $$renderer2.push("<!--[-1-->");
         $$renderer2.push(`<div class="cinder-progress__fill cinder-progress__fill--indeterminate"></div>`);
@@ -172,12 +318,26 @@ function Progress($$renderer, $$props) {
 }
 
 // src/components/status-dot/status-dot.svelte
-import * as $5 from "svelte/internal/server";
+import * as $6 from "svelte/internal/server";
 function Status_dot($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
+    const connectionStatusMap = {
+      connected: "online",
+      connecting: "warning",
+      disconnected: "offline",
+      error: "danger"
+    };
+    const connectionLabels = {
+      connected: "Connected",
+      connecting: "Connecting",
+      disconnected: "Disconnected",
+      error: "Error"
+    };
     let {
       status,
+      connectionState,
       label,
+      live,
       showLabel = true,
       size = "md",
       class: className,
@@ -186,21 +346,35 @@ function Status_dot($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
-    const normalizedAriaLabel = $5.derived(() => ariaLabel?.trim() ? ariaLabel.trim() : undefined);
-    const normalizedLabel = $5.derived(() => label?.trim() ? label.trim() : undefined);
-    const hasVisibleLabel = $5.derived(() => showLabel && normalizedLabel() !== undefined);
-    const resolvedAriaLabel = $5.derived(() => normalizedAriaLabel() ?? normalizedLabel() ?? status);
-    $$renderer2.push(`<span${$5.attributes({
+    const normalizedAriaLabel = $6.derived(() => ariaLabel?.trim() ? ariaLabel.trim() : undefined);
+    const resolvedStatus = $6.derived(() => status ?? (connectionState === undefined ? "neutral" : connectionStatusMap[connectionState]));
+    const resolvedLive = $6.derived(() => live ?? connectionState !== undefined);
+    const normalizedLabel = $6.derived(() => label?.trim() ? label.trim() : connectionState === undefined ? undefined : connectionLabels[connectionState]);
+    const hasVisibleLabel = $6.derived(() => showLabel && normalizedLabel() !== undefined);
+    const resolvedAriaLabel = $6.derived(() => normalizedAriaLabel() ?? normalizedLabel() ?? resolvedStatus());
+    const visibleLabelIsLiveDuplicate = $6.derived(() => resolvedLive() && normalizedLabel() !== undefined && resolvedAriaLabel() !== normalizedLabel());
+    const needsHiddenLiveLabel = $6.derived(() => resolvedLive() && (!hasVisibleLabel() || visibleLabelIsLiveDuplicate()));
+    $$renderer2.push(`<span${$6.attributes({
       ...rest,
-      class: $5.clsx(classNames("cinder-status-dot", className)),
-      "data-cinder-status": status,
+      class: $6.clsx(classNames("cinder-status-dot", className)),
+      "data-cinder-status": resolvedStatus(),
+      "data-cinder-state": connectionState,
       "data-cinder-size": size,
-      role: "img",
-      "aria-label": resolvedAriaLabel()
+      role: resolvedLive() ? "status" : "img",
+      "aria-live": resolvedLive() ? "polite" : undefined,
+      "aria-atomic": resolvedLive() ? "true" : undefined,
+      "aria-label": resolvedLive() ? undefined : resolvedAriaLabel()
     })}><span class="cinder-status-dot__indicator" aria-hidden="true"></span> `);
     if (hasVisibleLabel()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<span class="cinder-status-dot__label">${$5.escape(normalizedLabel())}</span>`);
+      $$renderer2.push(`<span class="cinder-status-dot__label"${$6.attr("aria-hidden", visibleLabelIsLiveDuplicate() ? "true" : undefined)}>${$6.escape(normalizedLabel())}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (needsHiddenLiveLabel()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-sr-only">${$6.escape(resolvedAriaLabel())}</span>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -211,6 +385,7 @@ function Status_dot($$renderer, $$props) {
 // src/components/run-step-timeline/run-step-timeline.svelte
 function Run_step_timeline($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
+    const MAX_NESTED_STEP_DEPTH = 3;
     let {
       steps,
       label,
@@ -222,17 +397,20 @@ function Run_step_timeline($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
-    const resolvedAriaLabel = $6.derived(() => ariaLabelledby === undefined && ariaLabel === undefined ? label : ariaLabel);
+    const resolvedAriaLabel = $7.derived(() => ariaLabelledby === undefined && ariaLabel === undefined ? label : ariaLabel);
+    const renderedSteps = $7.derived(() => flattenRunSteps(steps));
     function statusDotStatus(status) {
       switch (status) {
         case "succeeded":
           return "success";
         case "failed":
-          return "error";
+          return "danger";
         case "running":
           return "online";
         case "retrying":
           return "warning";
+        case "waiting_approval":
+          return "accent";
         case "cancelled":
           return "offline";
         case "skipped":
@@ -257,6 +435,8 @@ function Run_step_timeline($$renderer, $$props) {
           return "Skipped";
         case "retrying":
           return "Retrying";
+        case "waiting_approval":
+          return "Waiting approval";
       }
     }
     function badgeVariant(status) {
@@ -269,6 +449,8 @@ function Run_step_timeline($$renderer, $$props) {
           return "info";
         case "retrying":
           return "warning";
+        case "waiting_approval":
+          return "accent";
         case "cancelled":
           return "neutral";
         case "skipped":
@@ -280,8 +462,11 @@ function Run_step_timeline($$renderer, $$props) {
     function isTerminal(status) {
       return status === "succeeded" || status === "failed" || status === "cancelled" || status === "skipped";
     }
+    function isCurrent(status) {
+      return status === "running" || status === "retrying" || status === "waiting_approval";
+    }
     function hasProgress(step) {
-      return step.progress !== undefined && (step.status === "running" || step.status === "retrying");
+      return step.progress !== undefined && isCurrent(step.status);
     }
     function metadataItems(step) {
       const items = [];
@@ -299,106 +484,267 @@ function Run_step_timeline($$renderer, $$props) {
       }
       return items;
     }
-    $$renderer2.push(`<ol${$6.attributes({
+    function actionsCountLabel(actionsCount) {
+      return actionsCount === 1 ? "1 action" : `${actionsCount} actions`;
+    }
+    function hiddenNestedStepLabel(hiddenStepCount) {
+      return hiddenStepCount === 1 ? "1 nested step hidden" : `${hiddenStepCount} nested steps hidden`;
+    }
+    function safeStepLinkHref(href) {
+      const trimmedHref = href.trim();
+      if (trimmedHref === "")
+        return;
+      if (/[\u0000-\u001F\u007F]/.test(trimmedHref))
+        return;
+      if (trimmedHref.includes("\\"))
+        return;
+      const leadingSeparators = trimmedHref.match(/^[\\/]+/)?.[0] ?? "";
+      if (leadingSeparators.length > 1)
+        return;
+      if (/^[A-Za-z][A-Za-z\d+.-]*:/.test(trimmedHref)) {
+        try {
+          const parsedUrl = new URL(trimmedHref);
+          return parsedUrl.protocol === "http:" || parsedUrl.protocol === "https:" ? trimmedHref : undefined;
+        } catch {
+          return;
+        }
+      }
+      return trimmedHref;
+    }
+    function flattenRunSteps(steps2) {
+      const rows = [];
+      appendRunStepRows(rows, steps2, 0, "");
+      const currentRowIndex = deepestCurrentStepIndex(rows);
+      return rows.map((row, index) => ({
+        ...row,
+        connectorAfter: rows[index + 1] === undefined || (rows[index + 1]?.depth ?? 0) < row.depth ? "hidden" : "visible",
+        ariaCurrent: index === currentRowIndex
+      }));
+    }
+    function appendRunStepRows(rows, steps2, depth, pathPrefix) {
+      for (const step of steps2) {
+        const pathKey = nestedStepPathKey(pathPrefix, step.id);
+        rows.push({ kind: "step", step, depth, pathKey });
+        if (step.children && step.children.length > 0) {
+          if (depth < MAX_NESTED_STEP_DEPTH) {
+            appendRunStepRows(rows, step.children, depth + 1, pathKey);
+          } else {
+            const hiddenSummary = summarizeNestedRunSteps(step.children);
+            rows.push({
+              kind: "depth-limit",
+              depth,
+              pathKey: `${pathKey}/__cinder-depth-limit`,
+              hiddenStepCount: hiddenSummary.count,
+              hiddenCurrent: hiddenSummary.hasCurrent
+            });
+          }
+        }
+      }
+    }
+    function nestedStepPathKey(pathPrefix, stepId) {
+      const encodedStepId = escapeStepPathSegment(stepId);
+      return pathPrefix === "" ? encodedStepId : `${pathPrefix}/${encodedStepId}`;
+    }
+    function escapeStepPathSegment(stepId) {
+      return stepId.replaceAll("%", "%25").replaceAll("/", "%2F");
+    }
+    function summarizeNestedRunSteps(steps2) {
+      let count = 0;
+      let hasCurrent = false;
+      const stack = [...steps2];
+      while (stack.length > 0) {
+        const step = stack.pop();
+        if (step === undefined)
+          continue;
+        count += 1;
+        if (isCurrent(step.status))
+          hasCurrent = true;
+        const children2 = step.children;
+        if (children2) {
+          for (let index = children2.length - 1;index >= 0; index -= 1) {
+            const child = children2[index];
+            if (child)
+              stack.push(child);
+          }
+        }
+      }
+      return { count, hasCurrent };
+    }
+    function deepestCurrentStepIndex(rows) {
+      let currentIndex = -1;
+      let currentDepth = -1;
+      rows.forEach((row, index) => {
+        const rowCurrentDepth = row.kind === "depth-limit" && row.hiddenCurrent ? row.depth + 1 : row.kind === "step" && isCurrent(row.step.status) ? row.depth : -1;
+        if (rowCurrentDepth > currentDepth) {
+          currentIndex = index;
+          currentDepth = rowCurrentDepth;
+        }
+      });
+      return currentIndex;
+    }
+    $$renderer2.push(`<ol${$7.attributes({
       ...rest,
-      class: $6.clsx(classNames("cinder-run-step-timeline", className)),
+      class: $7.clsx(classNames("cinder-run-step-timeline", className)),
       "aria-label": resolvedAriaLabel(),
       "aria-labelledby": ariaLabelledby
     })}><!--[-->`);
-    const each_array = $6.ensure_array_like(steps);
-    for (let index = 0, $$length = each_array.length;index < $$length; index++) {
-      let step = each_array[index];
-      const isLast = index === steps.length - 1;
-      const isCurrent = step.status === "running" || step.status === "retrying";
-      const terminal = isTerminal(step.status);
-      const metadata = metadataItems(step);
-      $$renderer2.push(`<li class="cinder-run-step-timeline__item"${$6.attr("data-cinder-status", step.status)}${$6.attr("data-cinder-terminal", terminal ? "" : undefined)}${$6.attr("data-cinder-connector-after", isLast ? "hidden" : "visible")}${$6.attr("aria-current", isCurrent ? "step" : undefined)}><div class="cinder-run-step-timeline__event"><span class="cinder-run-step-timeline__marker" aria-hidden="true" inert="">`);
-      Status_dot($$renderer2, {
-        status: statusDotStatus(step.status),
-        label: statusLabel(step.status),
-        showLabel: false,
-        size: "md"
-      });
-      $$renderer2.push(`<!----></span> <div class="cinder-run-step-timeline__content"><div class="cinder-run-step-timeline__header"><span class="cinder-run-step-timeline__label">${$6.escape(step.label)}</span> `);
-      Badge($$renderer2, {
-        variant: badgeVariant(step.status),
-        size: "xs",
-        children: ($$renderer3) => {
-          $$renderer3.push(`<!---->${$6.escape(statusLabel(step.status))}`);
-        },
-        $$slots: { default: true }
-      });
-      $$renderer2.push(`<!----> `);
-      if (step.attemptCount !== undefined && step.attemptCount > 1) {
+    const each_array = $7.ensure_array_like(renderedSteps());
+    for (let $$index_2 = 0, $$length = each_array.length;$$index_2 < $$length; $$index_2++) {
+      let row = each_array[$$index_2];
+      if (row.kind === "depth-limit") {
         $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<li class="cinder-run-step-timeline__item" data-cinder-status="depth-limit"${$7.attr("data-cinder-depth", row.depth)}${$7.attr("data-cinder-path", row.pathKey)}${$7.attr("data-cinder-connector-after", row.connectorAfter)} data-cinder-depth-limit=""${$7.attr("aria-current", row.ariaCurrent ? "step" : undefined)}${$7.attr_style("", { "--_cinder-rst-depth": row.depth })}><div class="cinder-run-step-timeline__event"><span class="cinder-run-step-timeline__marker" aria-hidden="true" inert="">`);
+        Status_dot($$renderer2, {
+          status: "neutral",
+          label: "Nested steps hidden",
+          showLabel: false,
+          size: "md"
+        });
+        $$renderer2.push(`<!----></span> <div class="cinder-run-step-timeline__content"><div class="cinder-run-step-timeline__header"><span class="cinder-run-step-timeline__label">${$7.escape(hiddenNestedStepLabel(row.hiddenStepCount))}</span> `);
         Badge($$renderer2, {
+          class: "cinder-run-step-timeline__status",
           variant: "neutral",
           size: "xs",
-          mono: true,
+          "aria-label": "Status: Nested child steps hidden",
           children: ($$renderer3) => {
-            $$renderer3.push(`<!---->attempt ${$6.escape(step.attemptCount)}`);
+            $$renderer3.push(`<!---->Depth cap`);
           },
           $$slots: { default: true }
         });
+        $$renderer2.push(`<!----></div> <p class="cinder-run-step-timeline__body">Additional child-workflow steps are hidden because the timeline depth cap was reached.</p></div></div></li>`);
       } else {
         $$renderer2.push("<!--[-1-->");
-      }
-      $$renderer2.push(`<!--]--></div> `);
-      if (hasProgress(step)) {
-        $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<div class="cinder-run-step-timeline__progress">`);
-        Progress($$renderer2, {
-          value: step.progress ?? 0,
-          max: step.progressMax ?? 100,
-          size: "sm",
-          ariaLabel: `${step.label} progress`
+        const step = row.step;
+        const terminal = isTerminal(step.status);
+        const metadata = metadataItems(step);
+        $$renderer2.push(`<li class="cinder-run-step-timeline__item"${$7.attr("data-cinder-status", step.status)}${$7.attr("data-cinder-depth", row.depth)}${$7.attr("data-cinder-path", row.pathKey)}${$7.attr("data-cinder-terminal", terminal ? "" : undefined)}${$7.attr("data-cinder-connector-after", row.connectorAfter)}${$7.attr("aria-current", row.ariaCurrent ? "step" : undefined)}${$7.attr_style("", { "--_cinder-rst-depth": row.depth })}><div class="cinder-run-step-timeline__event"><span class="cinder-run-step-timeline__marker" aria-hidden="true" inert="">`);
+        Status_dot($$renderer2, {
+          status: statusDotStatus(step.status),
+          label: statusLabel(step.status),
+          showLabel: false,
+          size: "md"
         });
-        $$renderer2.push(`<!----></div>`);
-      } else {
-        $$renderer2.push("<!--[-1-->");
-      }
-      $$renderer2.push(`<!--]--> `);
-      if (metadata.length > 0) {
-        $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<dl class="cinder-run-step-timeline__meta"><!--[-->`);
-        const each_array_1 = $6.ensure_array_like(metadata);
-        for (let $$index = 0, $$length2 = each_array_1.length;$$index < $$length2; $$index++) {
-          let item = each_array_1[$$index];
-          $$renderer2.push(`<div class="cinder-run-step-timeline__meta-row"><dt class="cinder-run-step-timeline__meta-term">${$6.escape(item.term)}</dt> <dd class="cinder-run-step-timeline__meta-definition">${$6.escape(item.definition)}</dd></div>`);
+        $$renderer2.push(`<!----></span> <div class="cinder-run-step-timeline__content"><div class="cinder-run-step-timeline__header"><span class="cinder-run-step-timeline__label">${$7.escape(step.label)}</span> `);
+        if (step.link) {
+          $$renderer2.push("<!--[0-->");
+          const safeLinkHref = safeStepLinkHref(step.link.href);
+          if (safeLinkHref) {
+            $$renderer2.push("<!--[0-->");
+            Link($$renderer2, {
+              href: safeLinkHref,
+              class: "cinder-run-step-timeline__link",
+              children: ($$renderer3) => {
+                $$renderer3.push(`<!---->${$7.escape(step.link.label)}`);
+              },
+              $$slots: { default: true }
+            });
+          } else {
+            $$renderer2.push("<!--[-1-->");
+            $$renderer2.push(`<span class="cinder-run-step-timeline__link cinder-run-step-timeline__link--unsafe">${$7.escape(step.link.label)}</span>`);
+          }
+          $$renderer2.push(`<!--]-->`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
         }
-        $$renderer2.push(`<!--]--></dl>`);
-      } else {
-        $$renderer2.push("<!--[-1-->");
-      }
-      $$renderer2.push(`<!--]--> `);
-      if (step.details && step.details.length > 0) {
-        $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<div class="cinder-run-step-timeline__details"><!--[-->`);
-        const each_array_2 = $6.ensure_array_like(step.details);
-        for (let $$index_1 = 0, $$length2 = each_array_2.length;$$index_1 < $$length2; $$index_1++) {
-          let detail = each_array_2[$$index_1];
-          Collapsible($$renderer2, {
-            trigger: detail.label,
+        $$renderer2.push(`<!--]--> `);
+        Badge($$renderer2, {
+          class: "cinder-run-step-timeline__status",
+          variant: badgeVariant(step.status),
+          size: "xs",
+          "aria-label": `Status: ${statusLabel(step.status)}`,
+          children: ($$renderer3) => {
+            $$renderer3.push(`<!---->${$7.escape(statusLabel(step.status))}`);
+          },
+          $$slots: { default: true }
+        });
+        $$renderer2.push(`<!----> `);
+        if (step.attemptCount !== undefined && step.attemptCount > 1) {
+          $$renderer2.push("<!--[0-->");
+          Badge($$renderer2, {
+            variant: "neutral",
+            size: "xs",
+            mono: true,
             children: ($$renderer3) => {
-              $$renderer3.push(`<pre class="cinder-run-step-timeline__detail-content">${$6.escape(detail.content)}</pre>`);
+              $$renderer3.push(`<!---->attempt ${$7.escape(step.attemptCount)}`);
             },
             $$slots: { default: true }
           });
+        } else {
+          $$renderer2.push("<!--[-1-->");
         }
-        $$renderer2.push(`<!--]--></div>`);
-      } else {
-        $$renderer2.push("<!--[-1-->");
-      }
-      $$renderer2.push(`<!--]--> `);
-      if (children) {
-        $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<div class="cinder-run-step-timeline__body">`);
-        children($$renderer2, step);
-        $$renderer2.push(`<!----></div>`);
-      } else {
-        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<!--]--> `);
+        if (step.actionsCount !== undefined && step.actionsCount > 0) {
+          $$renderer2.push("<!--[0-->");
+          Badge($$renderer2, {
+            variant: "neutral",
+            size: "xs",
+            mono: true,
+            children: ($$renderer3) => {
+              $$renderer3.push(`<!---->${$7.escape(actionsCountLabel(step.actionsCount))}`);
+            },
+            $$slots: { default: true }
+          });
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--></div> `);
+        if (hasProgress(step)) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<div class="cinder-run-step-timeline__progress">`);
+          Progress($$renderer2, {
+            value: step.progress ?? 0,
+            max: step.progressMax ?? 100,
+            size: "sm",
+            ariaLabel: `${step.label} progress`
+          });
+          $$renderer2.push(`<!----></div>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--> `);
+        if (metadata.length > 0) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<dl class="cinder-run-step-timeline__meta"><!--[-->`);
+          const each_array_1 = $7.ensure_array_like(metadata);
+          for (let $$index = 0, $$length2 = each_array_1.length;$$index < $$length2; $$index++) {
+            let item = each_array_1[$$index];
+            $$renderer2.push(`<div class="cinder-run-step-timeline__meta-row"><dt class="cinder-run-step-timeline__meta-term">${$7.escape(item.term)}</dt> <dd class="cinder-run-step-timeline__meta-definition">${$7.escape(item.definition)}</dd></div>`);
+          }
+          $$renderer2.push(`<!--]--></dl>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--> `);
+        if (step.details && step.details.length > 0) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<div class="cinder-run-step-timeline__details"><!--[-->`);
+          const each_array_2 = $7.ensure_array_like(step.details);
+          for (let $$index_1 = 0, $$length2 = each_array_2.length;$$index_1 < $$length2; $$index_1++) {
+            let detail = each_array_2[$$index_1];
+            Collapsible($$renderer2, {
+              trigger: detail.label,
+              children: ($$renderer3) => {
+                $$renderer3.push(`<pre class="cinder-run-step-timeline__detail-content">${$7.escape(detail.content)}</pre>`);
+              },
+              $$slots: { default: true }
+            });
+          }
+          $$renderer2.push(`<!--]--></div>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--> `);
+        if (children) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<div class="cinder-run-step-timeline__body">`);
+          children($$renderer2, step);
+          $$renderer2.push(`<!----></div>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--></div></div></li>`);
       }
-      $$renderer2.push(`<!--]--></div></div></li>`);
+      $$renderer2.push(`<!--]-->`);
     }
     $$renderer2.push(`<!--]--></ol>`);
   });
@@ -411,4 +757,4 @@ export {
   Run_step_timeline as RunStepTimeline
 };
 
-//# debugId=C1ECA33F44ECB87B64756E2164756E21
+//# debugId=43AECDC458AAB71664756E2164756E21