@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -26,7 +26,7 @@ import"@lostgradient/cinder/run-step-timeline/styles";
 
 // src/components/run-step-timeline/run-step-timeline.svelte
 import"svelte/internal/disclose-version";
-import * as $6 from "svelte/internal/client";
+import * as $7 from "svelte/internal/client";
 
 // src/utilities/class-names.ts
 function classNames(...parts) {
@@ -36,9 +36,46 @@ function classNames(...parts) {
 // src/components/badge/badge.svelte
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+var root_3 = $.from_svg(`<path></path>`);
+var root_2 = $.from_svg(`<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"></svg>`);
+var root_1 = $.from_html(`<!> <!>`, 1);
 var root = $.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
   $.push($$props, true);
+  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 = $.prop($$props, "variant", 3, "neutral"), size = $.prop($$props, "size", 3, "md"), mono = $.prop($$props, "mono", 3, false), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
@@ -46,19 +83,78 @@ function Badge($$anchor, $$props) {
     "variant",
     "size",
     "mono",
+    "subscriptionState",
     "class",
     "children"
   ]);
+  const subscriptionStateConfiguration = $.derived(() => $$props.subscriptionState === undefined ? undefined : subscriptionStateConfigurations[$$props.subscriptionState]);
+  const resolvedVariant = $.derived(() => $.get(subscriptionStateConfiguration)?.variant ?? variant());
+  const resolvedSubscriptionIconPaths = $.derived(() => $$props.subscriptionState === undefined ? undefined : subscriptionStateIconPaths[$$props.subscriptionState]);
   var span = root();
   $.attribute_effect(span, ($0) => ({
     class: $0,
-    "data-cinder-variant": variant(),
+    "data-cinder-variant": $.get(resolvedVariant),
     "data-cinder-size": size(),
     "data-cinder-mono": mono() ? "" : undefined,
+    "data-cinder-subscription-state": $$props.subscriptionState,
     ...rest
   }), [() => classNames("cinder-badge", $$props.class)]);
   var node = $.child(span);
-  $.snippet(node, () => $$props.children ?? $.noop);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment = root_1();
+      var node_1 = $.first_child(fragment);
+      {
+        var consequent = ($$anchor3) => {
+          var svg = root_2();
+          $.each(svg, 20, () => $.get(resolvedSubscriptionIconPaths), (iconPath) => iconPath, ($$anchor4, iconPath) => {
+            var path = root_3();
+            $.template_effect(() => $.set_attribute(path, "d", iconPath));
+            $.append($$anchor4, path);
+          });
+          $.reset(svg);
+          $.append($$anchor3, svg);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(resolvedSubscriptionIconPaths))
+            $$render(consequent);
+        });
+      }
+      var node_2 = $.sibling(node_1, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment_1 = $.comment();
+          var node_3 = $.first_child(fragment_1);
+          $.snippet(node_3, () => $$props.children);
+          $.append($$anchor3, fragment_1);
+        };
+        var alternate = ($$anchor3) => {
+          var text2 = $.text();
+          $.template_effect(() => $.set_text(text2, $.get(subscriptionStateConfiguration).label));
+          $.append($$anchor3, text2);
+        };
+        $.if(node_2, ($$render) => {
+          if ($$props.children)
+            $$render(consequent_1);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $.append($$anchor2, fragment);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var fragment_3 = $.comment();
+      var node_4 = $.first_child(fragment_3);
+      $.snippet(node_4, () => $$props.children ?? $.noop);
+      $.append($$anchor2, fragment_3);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(subscriptionStateConfiguration))
+        $$render(consequent_2);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
   $.reset(span);
   $.append($$anchor, span);
   $.pop();
@@ -85,7 +181,7 @@ function useReducedMotion() {
 }
 
 // src/components/collapsible/collapsible.svelte
-var root_3 = $3.from_html(`<div role="region" class="cinder-collapsible__panel"><div class="cinder-collapsible__panel-inner"><!></div></div>`);
+var root_32 = $3.from_html(`<div role="region" class="cinder-collapsible__panel"><div class="cinder-collapsible__panel-inner"><!></div></div>`);
 var root2 = $3.from_html(`<div><button type="button" class="cinder-collapsible__trigger"><span class="cinder-collapsible__label"><!></span> <svg class="cinder-collapsible__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button> <!></div>`);
 function Collapsible($$anchor, $$props) {
   const autoId = $3.props_id();
@@ -97,7 +193,7 @@ function Collapsible($$anchor, $$props) {
     "trigger",
     "children",
     "open",
-    "onToggle",
+    "ontoggle",
     "disabled",
     "idBase",
     "class"
@@ -113,7 +209,7 @@ function Collapsible($$anchor, $$props) {
       return;
     const next2 = !open();
     open(next2);
-    $$props.onToggle?.(next2);
+    $$props.ontoggle?.(next2);
   }
   var div = root2();
   $3.attribute_effect(div, ($0) => ({
@@ -127,9 +223,9 @@ function Collapsible($$anchor, $$props) {
   var node = $3.child(span);
   {
     var consequent = ($$anchor2) => {
-      var text2 = $3.text();
-      $3.template_effect(() => $3.set_text(text2, $$props.trigger));
-      $3.append($$anchor2, text2);
+      var text3 = $3.text();
+      $3.template_effect(() => $3.set_text(text3, $$props.trigger));
+      $3.append($$anchor2, text3);
     };
     var alternate = ($$anchor2) => {
       var fragment_1 = $3.comment();
@@ -150,7 +246,7 @@ function Collapsible($$anchor, $$props) {
   var node_2 = $3.sibling(button, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var div_1 = root_3();
+      var div_1 = root_32();
       var div_2 = $3.child(div_1);
       var node_3 = $3.child(div_2);
       $3.snippet(node_3, () => $$props.children);
@@ -181,9 +277,106 @@ function Collapsible($$anchor, $$props) {
 }
 $3.delegate(["click"]);
 
-// src/components/progress/progress.svelte
+// src/components/link/link.svelte
 import"svelte/internal/disclose-version";
 import * as $4 from "svelte/internal/client";
+var root_12 = $4.from_html(`<span><!></span>`);
+var root_22 = $4.from_html(`<a><!></a>`);
+function Link($$anchor, $$props) {
+  $4.push($$props, true);
+  let underline = $4.prop($$props, "underline", 3, "hover"), color = $4.prop($$props, "color", 3, "primary"), external = $4.prop($$props, "external", 3, false), disabled = $4.prop($$props, "disabled", 3, false), rest = $4.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "href",
+    "underline",
+    "color",
+    "external",
+    "disabled",
+    "target",
+    "rel",
+    "tabindex",
+    "class",
+    "children"
+  ]);
+  const spanAttributes = $4.derived(() => rest);
+  const resolvedTarget = $4.derived(() => disabled() ? undefined : external() && !$$props.target ? "_blank" : $$props.target);
+  const resolvedRel = $4.derived(() => {
+    if (disabled())
+      return;
+    const needsSafeRel = external() || $4.get(resolvedTarget)?.toLowerCase() === "_blank";
+    const consumerParts = ($$props.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", $$props.class));
+  var fragment = $4.comment();
+  var node = $4.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var span = root_12();
+      $4.attribute_effect(span, () => ({
+        ...$4.get(spanAttributes),
+        class: $4.get(resolvedClass),
+        "aria-disabled": "true",
+        "data-cinder-link": true,
+        "data-underline": underline(),
+        "data-color": color(),
+        "data-disabled": true
+      }));
+      var node_1 = $4.child(span);
+      $4.snippet(node_1, () => $$props.children);
+      $4.reset(span);
+      $4.append($$anchor2, span);
+    };
+    var alternate = ($$anchor2) => {
+      var a = root_22();
+      $4.attribute_effect(a, () => ({
+        ...rest,
+        href: $$props.href,
+        tabindex: $$props.tabindex,
+        target: $4.get(resolvedTarget),
+        rel: $4.get(resolvedRel),
+        class: $4.get(resolvedClass),
+        "data-cinder-link": true,
+        "data-underline": underline(),
+        "data-color": color()
+      }));
+      var node_2 = $4.child(a);
+      $4.snippet(node_2, () => $$props.children);
+      $4.reset(a);
+      $4.append($$anchor2, a);
+    };
+    $4.if(node, ($$render) => {
+      if (disabled())
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $4.append($$anchor, fragment);
+  $4.pop();
+}
+
+// src/components/progress/progress.svelte
+import"svelte/internal/disclose-version";
+import * as $5 from "svelte/internal/client";
 
 // ../../node_modules/esm-env/true.js
 var true_default = true;
@@ -195,181 +388,223 @@ function devWarn(message, ...args) {
 }
 
 // src/components/progress/progress.svelte
-var root_2 = $4.from_svg(`<circle class="cinder-progress__fill" cx="18" cy="18" r="16"></circle>`);
-var root_32 = $4.from_svg(`<circle class="cinder-progress__fill cinder-progress__fill--indeterminate" cx="18" cy="18" r="16"></circle>`);
-var root_1 = $4.from_html(`<div role="progressbar"><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><!></svg></div>`);
-var root_5 = $4.from_html(`<div class="cinder-progress__fill"></div>`);
-var root_6 = $4.from_html(`<div class="cinder-progress__fill cinder-progress__fill--indeterminate"></div>`);
-var root_4 = $4.from_html(`<div role="progressbar"><div class="cinder-progress__track"><!></div></div>`);
+var root_23 = $5.from_svg(`<circle class="cinder-progress__fill" cx="18" cy="18" r="16"></circle>`);
+var root_33 = $5.from_svg(`<circle class="cinder-progress__fill cinder-progress__fill--indeterminate" cx="18" cy="18" r="16"></circle>`);
+var root_13 = $5.from_html(`<div role="progressbar"><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><!></svg></div>`);
+var root_5 = $5.from_html(`<div class="cinder-progress__fill"></div>`);
+var root_6 = $5.from_html(`<div class="cinder-progress__fill cinder-progress__fill--indeterminate"></div>`);
+var root_4 = $5.from_html(`<div role="progressbar"><div class="cinder-progress__track"><!></div></div>`);
 function Progress($$anchor, $$props) {
-  $4.push($$props, true);
-  let max = $4.prop($$props, "max", 3, 100), variant = $4.prop($$props, "variant", 3, "bar"), size = $4.prop($$props, "size", 3, "md");
-  $4.user_effect(() => {
+  $5.push($$props, true);
+  let max = $5.prop($$props, "max", 3, 100), variant = $5.prop($$props, "variant", 3, "bar"), size = $5.prop($$props, "size", 3, "md");
+  $5.user_effect(() => {
     const hasAriaLabel = typeof $$props.ariaLabel === "string" && $$props.ariaLabel.trim().length > 0;
     const hasAriaLabelledby = typeof $$props.ariaLabelledby === "string" && $$props.ariaLabelledby.trim().length > 0;
     if (!hasAriaLabel && !hasAriaLabelledby) {
       devWarn("[cinder/Progress] rendered without an accessible name — pass `ariaLabel` or `ariaLabelledby`. `label` only sets aria-valuetext and does not name the progressbar.");
     }
   });
-  const effectiveMax = $4.derived(() => Number.isFinite(max()) && max() > 0 ? max() : undefined);
-  const isIndeterminate = $4.derived(() => $$props.value === undefined || !Number.isFinite($$props.value) || $4.get(effectiveMax) === undefined);
-  const clampedValue = $4.derived(() => $4.get(isIndeterminate) ? undefined : Math.max(0, Math.min($4.get(effectiveMax), $$props.value)));
-  const percent = $4.derived(() => $4.get(clampedValue) === undefined ? undefined : Math.round($4.get(clampedValue) / $4.get(effectiveMax) * 100));
-  const valueText = $4.derived(() => $$props.label ?? ($4.get(isIndeterminate) ? "Loading" : `${$4.get(percent)}%`));
-  var fragment = $4.comment();
-  var node = $4.first_child(fragment);
+  const effectiveMax = $5.derived(() => Number.isFinite(max()) && max() > 0 ? max() : undefined);
+  const isIndeterminate = $5.derived(() => $$props.value === undefined || !Number.isFinite($$props.value) || $5.get(effectiveMax) === undefined);
+  const clampedValue = $5.derived(() => $5.get(isIndeterminate) ? undefined : Math.max(0, Math.min($5.get(effectiveMax), $$props.value)));
+  const percent = $5.derived(() => $5.get(clampedValue) === undefined ? undefined : Math.round($5.get(clampedValue) / $5.get(effectiveMax) * 100));
+  const valueText = $5.derived(() => $$props.label ?? ($5.get(isIndeterminate) ? "Loading" : `${$5.get(percent)}%`));
+  var fragment = $5.comment();
+  var node = $5.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
-      var div = root_1();
-      $4.set_attribute(div, "aria-valuemin", 0);
-      var svg = $4.child(div);
-      var node_1 = $4.sibling($4.child(svg));
+      var div = root_13();
+      $5.set_attribute(div, "aria-valuemin", 0);
+      var svg = $5.child(div);
+      var node_1 = $5.sibling($5.child(svg));
       {
         var consequent = ($$anchor3) => {
-          var circle = root_2();
+          var circle = root_23();
           let styles;
-          $4.template_effect(() => styles = $4.set_style(circle, "", styles, { "--_cinder-progress-percent": $4.get(percent) }));
-          $4.append($$anchor3, circle);
+          $5.template_effect(() => styles = $5.set_style(circle, "", styles, { "--_cinder-progress-percent": $5.get(percent) }));
+          $5.append($$anchor3, circle);
         };
         var alternate = ($$anchor3) => {
-          var circle_1 = root_32();
-          $4.append($$anchor3, circle_1);
+          var circle_1 = root_33();
+          $5.append($$anchor3, circle_1);
         };
-        $4.if(node_1, ($$render) => {
-          if (!$4.get(isIndeterminate))
+        $5.if(node_1, ($$render) => {
+          if (!$5.get(isIndeterminate))
             $$render(consequent);
           else
             $$render(alternate, -1);
         });
       }
-      $4.reset(svg);
-      $4.reset(div);
-      $4.template_effect(($0) => {
-        $4.set_class(div, 1, $0);
-        $4.set_attribute(div, "aria-label", $$props.ariaLabel);
-        $4.set_attribute(div, "aria-labelledby", $$props.ariaLabelledby);
-        $4.set_attribute(div, "aria-valuemax", $4.get(effectiveMax));
-        $4.set_attribute(div, "aria-valuenow", $4.get(clampedValue));
-        $4.set_attribute(div, "aria-valuetext", $4.get(valueText));
-        $4.set_attribute(div, "data-cinder-size", size());
-        $4.set_attribute(div, "data-cinder-indeterminate", $4.get(isIndeterminate) || undefined);
+      $5.reset(svg);
+      $5.reset(div);
+      $5.template_effect(($0) => {
+        $5.set_class(div, 1, $0);
+        $5.set_attribute(div, "aria-label", $$props.ariaLabel);
+        $5.set_attribute(div, "aria-labelledby", $$props.ariaLabelledby);
+        $5.set_attribute(div, "aria-valuemax", $5.get(effectiveMax));
+        $5.set_attribute(div, "aria-valuenow", $5.get(clampedValue));
+        $5.set_attribute(div, "aria-valuetext", $5.get(valueText));
+        $5.set_attribute(div, "data-cinder-size", size());
+        $5.set_attribute(div, "data-cinder-indeterminate", $5.get(isIndeterminate) || undefined);
       }, [
-        () => $4.clsx(classNames("cinder-progress", "cinder-progress--ring", $$props.class))
+        () => $5.clsx(classNames("cinder-progress", "cinder-progress--ring", $$props.class))
       ]);
-      $4.append($$anchor2, div);
+      $5.append($$anchor2, div);
     };
     var alternate_2 = ($$anchor2) => {
       var div_1 = root_4();
-      $4.set_attribute(div_1, "aria-valuemin", 0);
-      var div_2 = $4.child(div_1);
-      var node_2 = $4.child(div_2);
+      $5.set_attribute(div_1, "aria-valuemin", 0);
+      var div_2 = $5.child(div_1);
+      var node_2 = $5.child(div_2);
       {
         var consequent_2 = ($$anchor3) => {
           var div_3 = root_5();
           let styles_1;
-          $4.template_effect(() => styles_1 = $4.set_style(div_3, "", styles_1, { width: `${$4.get(percent) ?? ""}%` }));
-          $4.append($$anchor3, div_3);
+          $5.template_effect(() => styles_1 = $5.set_style(div_3, "", styles_1, { width: `${$5.get(percent) ?? ""}%` }));
+          $5.append($$anchor3, div_3);
         };
         var alternate_1 = ($$anchor3) => {
           var div_4 = root_6();
-          $4.append($$anchor3, div_4);
+          $5.append($$anchor3, div_4);
         };
-        $4.if(node_2, ($$render) => {
-          if (!$4.get(isIndeterminate))
+        $5.if(node_2, ($$render) => {
+          if (!$5.get(isIndeterminate))
             $$render(consequent_2);
           else
             $$render(alternate_1, -1);
         });
       }
-      $4.reset(div_2);
-      $4.reset(div_1);
-      $4.template_effect(($0) => {
-        $4.set_class(div_1, 1, $0);
-        $4.set_attribute(div_1, "aria-label", $$props.ariaLabel);
-        $4.set_attribute(div_1, "aria-labelledby", $$props.ariaLabelledby);
-        $4.set_attribute(div_1, "aria-valuemax", $4.get(effectiveMax));
-        $4.set_attribute(div_1, "aria-valuenow", $4.get(clampedValue));
-        $4.set_attribute(div_1, "aria-valuetext", $4.get(valueText));
-        $4.set_attribute(div_1, "data-cinder-size", size());
-        $4.set_attribute(div_1, "data-cinder-indeterminate", $4.get(isIndeterminate) || undefined);
+      $5.reset(div_2);
+      $5.reset(div_1);
+      $5.template_effect(($0) => {
+        $5.set_class(div_1, 1, $0);
+        $5.set_attribute(div_1, "aria-label", $$props.ariaLabel);
+        $5.set_attribute(div_1, "aria-labelledby", $$props.ariaLabelledby);
+        $5.set_attribute(div_1, "aria-valuemax", $5.get(effectiveMax));
+        $5.set_attribute(div_1, "aria-valuenow", $5.get(clampedValue));
+        $5.set_attribute(div_1, "aria-valuetext", $5.get(valueText));
+        $5.set_attribute(div_1, "data-cinder-size", size());
+        $5.set_attribute(div_1, "data-cinder-indeterminate", $5.get(isIndeterminate) || undefined);
       }, [
-        () => $4.clsx(classNames("cinder-progress", "cinder-progress--bar", $$props.class))
+        () => $5.clsx(classNames("cinder-progress", "cinder-progress--bar", $$props.class))
       ]);
-      $4.append($$anchor2, div_1);
+      $5.append($$anchor2, div_1);
     };
-    $4.if(node, ($$render) => {
+    $5.if(node, ($$render) => {
       if (variant() === "ring")
         $$render(consequent_1);
       else
         $$render(alternate_2, -1);
     });
   }
-  $4.append($$anchor, fragment);
-  $4.pop();
+  $5.append($$anchor, fragment);
+  $5.pop();
 }
 
 // src/components/status-dot/status-dot.svelte
 import"svelte/internal/disclose-version";
-import * as $5 from "svelte/internal/client";
-var root_12 = $5.from_html(`<span class="cinder-status-dot__label"> </span>`);
-var root3 = $5.from_html(`<span><span class="cinder-status-dot__indicator" aria-hidden="true"></span> <!></span>`);
+import * as $6 from "svelte/internal/client";
+var root_14 = $6.from_html(`<span class="cinder-status-dot__label"> </span>`);
+var root_24 = $6.from_html(`<span class="cinder-sr-only"> </span>`);
+var root3 = $6.from_html(`<span><span class="cinder-status-dot__indicator" aria-hidden="true"></span> <!> <!></span>`);
 function Status_dot($$anchor, $$props) {
-  $5.push($$props, true);
-  let showLabel = $5.prop($$props, "showLabel", 3, true), size = $5.prop($$props, "size", 3, "md"), rest = $5.rest_props($$props, [
+  $6.push($$props, true);
+  const connectionStatusMap = {
+    connected: "online",
+    connecting: "warning",
+    disconnected: "offline",
+    error: "danger"
+  };
+  const connectionLabels = {
+    connected: "Connected",
+    connecting: "Connecting",
+    disconnected: "Disconnected",
+    error: "Error"
+  };
+  let showLabel = $6.prop($$props, "showLabel", 3, true), size = $6.prop($$props, "size", 3, "md"), rest = $6.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "status",
+    "connectionState",
     "label",
+    "live",
     "showLabel",
     "size",
     "class",
     "aria-label"
   ]);
-  const normalizedAriaLabel = $5.derived(() => $$props["aria-label"]?.trim() ? $$props["aria-label"].trim() : undefined);
-  const normalizedLabel = $5.derived(() => $$props.label?.trim() ? $$props.label.trim() : undefined);
-  const hasVisibleLabel = $5.derived(() => showLabel() && $5.get(normalizedLabel) !== undefined);
-  const resolvedAriaLabel = $5.derived(() => $5.get(normalizedAriaLabel) ?? $5.get(normalizedLabel) ?? $$props.status);
+  const normalizedAriaLabel = $6.derived(() => $$props["aria-label"]?.trim() ? $$props["aria-label"].trim() : undefined);
+  const resolvedStatus = $6.derived(() => $$props.status ?? ($$props.connectionState === undefined ? "neutral" : connectionStatusMap[$$props.connectionState]));
+  const resolvedLive = $6.derived(() => $$props.live ?? $$props.connectionState !== undefined);
+  const normalizedLabel = $6.derived(() => $$props.label?.trim() ? $$props.label.trim() : $$props.connectionState === undefined ? undefined : connectionLabels[$$props.connectionState]);
+  const hasVisibleLabel = $6.derived(() => showLabel() && $6.get(normalizedLabel) !== undefined);
+  const resolvedAriaLabel = $6.derived(() => $6.get(normalizedAriaLabel) ?? $6.get(normalizedLabel) ?? $6.get(resolvedStatus));
+  const visibleLabelIsLiveDuplicate = $6.derived(() => $6.get(resolvedLive) && $6.get(normalizedLabel) !== undefined && $6.get(resolvedAriaLabel) !== $6.get(normalizedLabel));
+  const needsHiddenLiveLabel = $6.derived(() => $6.get(resolvedLive) && (!$6.get(hasVisibleLabel) || $6.get(visibleLabelIsLiveDuplicate)));
   var span = root3();
-  $5.attribute_effect(span, ($0) => ({
+  $6.attribute_effect(span, ($0) => ({
     ...rest,
     class: $0,
-    "data-cinder-status": $$props.status,
+    "data-cinder-status": $6.get(resolvedStatus),
+    "data-cinder-state": $$props.connectionState,
     "data-cinder-size": size(),
-    role: "img",
-    "aria-label": $5.get(resolvedAriaLabel)
+    role: $6.get(resolvedLive) ? "status" : "img",
+    "aria-live": $6.get(resolvedLive) ? "polite" : undefined,
+    "aria-atomic": $6.get(resolvedLive) ? "true" : undefined,
+    "aria-label": $6.get(resolvedLive) ? undefined : $6.get(resolvedAriaLabel)
   }), [() => classNames("cinder-status-dot", $$props.class)]);
-  var node = $5.sibling($5.child(span), 2);
+  var node = $6.sibling($6.child(span), 2);
   {
     var consequent = ($$anchor2) => {
-      var span_1 = root_12();
-      var text2 = $5.child(span_1, true);
-      $5.reset(span_1);
-      $5.template_effect(() => $5.set_text(text2, $5.get(normalizedLabel)));
-      $5.append($$anchor2, span_1);
+      var span_1 = root_14();
+      var text3 = $6.child(span_1, true);
+      $6.reset(span_1);
+      $6.template_effect(() => {
+        $6.set_attribute(span_1, "aria-hidden", $6.get(visibleLabelIsLiveDuplicate) ? "true" : undefined);
+        $6.set_text(text3, $6.get(normalizedLabel));
+      });
+      $6.append($$anchor2, span_1);
     };
-    $5.if(node, ($$render) => {
-      if ($5.get(hasVisibleLabel))
+    $6.if(node, ($$render) => {
+      if ($6.get(hasVisibleLabel))
         $$render(consequent);
     });
   }
-  $5.reset(span);
-  $5.append($$anchor, span);
-  $5.pop();
+  var node_1 = $6.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span_2 = root_24();
+      var text_1 = $6.child(span_2, true);
+      $6.reset(span_2);
+      $6.template_effect(() => $6.set_text(text_1, $6.get(resolvedAriaLabel)));
+      $6.append($$anchor2, span_2);
+    };
+    $6.if(node_1, ($$render) => {
+      if ($6.get(needsHiddenLiveLabel))
+        $$render(consequent_1);
+    });
+  }
+  $6.reset(span);
+  $6.append($$anchor, span);
+  $6.pop();
 }
 
 // src/components/run-step-timeline/run-step-timeline.svelte
-var root_52 = $6.from_html(`<div class="cinder-run-step-timeline__progress"><!></div>`);
-var root_7 = $6.from_html(`<div class="cinder-run-step-timeline__meta-row"><dt class="cinder-run-step-timeline__meta-term"> </dt> <dd class="cinder-run-step-timeline__meta-definition"> </dd></div>`);
-var root_62 = $6.from_html(`<dl class="cinder-run-step-timeline__meta"></dl>`);
-var root_10 = $6.from_html(`<pre class="cinder-run-step-timeline__detail-content"> </pre>`);
-var root_8 = $6.from_html(`<div class="cinder-run-step-timeline__details"></div>`);
-var root_11 = $6.from_html(`<div class="cinder-run-step-timeline__body"><!></div>`);
-var root_13 = $6.from_html(`<li class="cinder-run-step-timeline__item"><div class="cinder-run-step-timeline__event"><span class="cinder-run-step-timeline__marker" aria-hidden="true" inert=""><!></span> <div class="cinder-run-step-timeline__content"><div class="cinder-run-step-timeline__header"><span class="cinder-run-step-timeline__label"> </span> <!> <!></div> <!> <!> <!> <!></div></div></li>`);
-var root4 = $6.from_html(`<ol></ol>`);
+var root_25 = $7.from_html(`<li class="cinder-run-step-timeline__item" data-cinder-status="depth-limit" data-cinder-depth-limit=""><div class="cinder-run-step-timeline__event"><span class="cinder-run-step-timeline__marker" aria-hidden="true" inert=""><!></span> <div class="cinder-run-step-timeline__content"><div class="cinder-run-step-timeline__header"><span class="cinder-run-step-timeline__label"> </span> <!></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>`);
+var root_8 = $7.from_html(`<span class="cinder-run-step-timeline__link cinder-run-step-timeline__link--unsafe"> </span>`);
+var root_142 = $7.from_html(`<div class="cinder-run-step-timeline__progress"><!></div>`);
+var root_16 = $7.from_html(`<div class="cinder-run-step-timeline__meta-row"><dt class="cinder-run-step-timeline__meta-term"> </dt> <dd class="cinder-run-step-timeline__meta-definition"> </dd></div>`);
+var root_15 = $7.from_html(`<dl class="cinder-run-step-timeline__meta"></dl>`);
+var root_19 = $7.from_html(`<pre class="cinder-run-step-timeline__detail-content"> </pre>`);
+var root_17 = $7.from_html(`<div class="cinder-run-step-timeline__details"></div>`);
+var root_20 = $7.from_html(`<div class="cinder-run-step-timeline__body"><!></div>`);
+var root_42 = $7.from_html(`<li class="cinder-run-step-timeline__item"><div class="cinder-run-step-timeline__event"><span class="cinder-run-step-timeline__marker" aria-hidden="true" inert=""><!></span> <div class="cinder-run-step-timeline__content"><div class="cinder-run-step-timeline__header"><span class="cinder-run-step-timeline__label"> </span> <!> <!> <!> <!></div> <!> <!> <!> <!></div></div></li>`);
+var root4 = $7.from_html(`<ol></ol>`);
 function Run_step_timeline($$anchor, $$props) {
-  $6.push($$props, true);
-  let rest = $6.rest_props($$props, [
+  $7.push($$props, true);
+  const MAX_NESTED_STEP_DEPTH = 3;
+  let rest = $7.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -380,17 +615,20 @@ function Run_step_timeline($$anchor, $$props) {
     "aria-label",
     "aria-labelledby"
   ]);
-  const resolvedAriaLabel = $6.derived(() => $$props["aria-labelledby"] === undefined && $$props["aria-label"] === undefined ? $$props.label : $$props["aria-label"]);
+  const resolvedAriaLabel = $7.derived(() => $$props["aria-labelledby"] === undefined && $$props["aria-label"] === undefined ? $$props.label : $$props["aria-label"]);
+  const renderedSteps = $7.derived(() => flattenRunSteps($$props.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":
@@ -415,6 +653,8 @@ function Run_step_timeline($$anchor, $$props) {
         return "Skipped";
       case "retrying":
         return "Retrying";
+      case "waiting_approval":
+        return "Waiting approval";
     }
   }
   function badgeVariant(status) {
@@ -427,6 +667,8 @@ function Run_step_timeline($$anchor, $$props) {
         return "info";
       case "retrying":
         return "warning";
+      case "waiting_approval":
+        return "accent";
       case "cancelled":
         return "neutral";
       case "skipped":
@@ -438,8 +680,11 @@ function Run_step_timeline($$anchor, $$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 = [];
@@ -457,195 +702,424 @@ function Run_step_timeline($$anchor, $$props) {
     }
     return items;
   }
+  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(steps) {
+    const rows = [];
+    appendRunStepRows(rows, steps, 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, steps, depth, pathPrefix) {
+    for (const step of steps) {
+      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(steps) {
+    let count = 0;
+    let hasCurrent = false;
+    const stack = [...steps];
+    while (stack.length > 0) {
+      const step = stack.pop();
+      if (step === undefined)
+        continue;
+      count += 1;
+      if (isCurrent(step.status))
+        hasCurrent = true;
+      const children = step.children;
+      if (children) {
+        for (let index = children.length - 1;index >= 0; index -= 1) {
+          const child7 = children[index];
+          if (child7)
+            stack.push(child7);
+        }
+      }
+    }
+    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;
+  }
   var ol = root4();
-  $6.attribute_effect(ol, ($0) => ({
+  $7.attribute_effect(ol, ($0) => ({
     ...rest,
     class: $0,
-    "aria-label": $6.get(resolvedAriaLabel),
+    "aria-label": $7.get(resolvedAriaLabel),
     "aria-labelledby": $$props["aria-labelledby"]
   }), [() => classNames("cinder-run-step-timeline", $$props.class)]);
-  $6.each(ol, 23, () => $$props.steps, (step) => step.id, ($$anchor2, step, index) => {
-    const isLast = $6.derived(() => $6.get(index) === $$props.steps.length - 1);
-    const isCurrent = $6.derived(() => $6.get(step).status === "running" || $6.get(step).status === "retrying");
-    const terminal = $6.derived(() => isTerminal($6.get(step).status));
-    const metadata = $6.derived(() => metadataItems($6.get(step)));
-    var li = root_13();
-    var div = $6.child(li);
-    var span = $6.child(div);
-    var node = $6.child(span);
-    {
-      let $0 = $6.derived(() => statusDotStatus($6.get(step).status));
-      let $1 = $6.derived(() => statusLabel($6.get(step).status));
-      Status_dot(node, {
-        get status() {
-          return $6.get($0);
-        },
-        get label() {
-          return $6.get($1);
-        },
-        showLabel: false,
-        size: "md"
-      });
-    }
-    $6.reset(span);
-    var div_1 = $6.sibling(span, 2);
-    var div_2 = $6.child(div_1);
-    var span_1 = $6.child(div_2);
-    var text3 = $6.child(span_1, true);
-    $6.reset(span_1);
-    var node_1 = $6.sibling(span_1, 2);
-    {
-      let $0 = $6.derived(() => badgeVariant($6.get(step).status));
-      Badge(node_1, {
-        get variant() {
-          return $6.get($0);
-        },
-        size: "xs",
-        children: ($$anchor3, $$slotProps) => {
-          $6.next();
-          var text_1 = $6.text();
-          $6.template_effect(($02) => $6.set_text(text_1, $02), [() => statusLabel($6.get(step).status)]);
-          $6.append($$anchor3, text_1);
-        },
-        $$slots: { default: true }
-      });
-    }
-    var node_2 = $6.sibling(node_1, 2);
+  $7.each(ol, 21, () => $7.get(renderedSteps), (row) => row.pathKey, ($$anchor2, row) => {
+    var fragment = $7.comment();
+    var node = $7.first_child(fragment);
     {
       var consequent = ($$anchor3) => {
-        Badge($$anchor3, {
+        var li = root_25();
+        let styles;
+        var div = $7.child(li);
+        var span = $7.child(div);
+        var node_1 = $7.child(span);
+        Status_dot(node_1, {
+          status: "neutral",
+          label: "Nested steps hidden",
+          showLabel: false,
+          size: "md"
+        });
+        $7.reset(span);
+        var div_1 = $7.sibling(span, 2);
+        var div_2 = $7.child(div_1);
+        var span_1 = $7.child(div_2);
+        var text4 = $7.child(span_1, true);
+        $7.reset(span_1);
+        var node_2 = $7.sibling(span_1, 2);
+        Badge(node_2, {
+          class: "cinder-run-step-timeline__status",
           variant: "neutral",
           size: "xs",
-          mono: true,
+          "aria-label": "Status: Nested child steps hidden",
           children: ($$anchor4, $$slotProps) => {
-            $6.next();
-            var text_2 = $6.text();
-            $6.template_effect(() => $6.set_text(text_2, `attempt ${$6.get(step).attemptCount ?? ""}`));
-            $6.append($$anchor4, text_2);
+            $7.next();
+            var text_1 = $7.text("Depth cap");
+            $7.append($$anchor4, text_1);
           },
           $$slots: { default: true }
         });
+        $7.reset(div_2);
+        $7.next(2);
+        $7.reset(div_1);
+        $7.reset(div);
+        $7.reset(li);
+        $7.template_effect(($0) => {
+          $7.set_attribute(li, "data-cinder-depth", $7.get(row).depth);
+          $7.set_attribute(li, "data-cinder-path", $7.get(row).pathKey);
+          $7.set_attribute(li, "data-cinder-connector-after", $7.get(row).connectorAfter);
+          $7.set_attribute(li, "aria-current", $7.get(row).ariaCurrent ? "step" : undefined);
+          styles = $7.set_style(li, "", styles, { "--_cinder-rst-depth": $7.get(row).depth });
+          $7.set_text(text4, $0);
+        }, [() => hiddenNestedStepLabel($7.get(row).hiddenStepCount)]);
+        $7.append($$anchor3, li);
       };
-      $6.if(node_2, ($$render) => {
-        if ($6.get(step).attemptCount !== undefined && $6.get(step).attemptCount > 1)
-          $$render(consequent);
-      });
-    }
-    $6.reset(div_2);
-    var node_3 = $6.sibling(div_2, 2);
-    {
-      var consequent_1 = ($$anchor3) => {
-        var div_3 = root_52();
-        var node_4 = $6.child(div_3);
+      var alternate_1 = ($$anchor3) => {
+        const step = $7.derived(() => $7.get(row).step);
+        const terminal = $7.derived(() => isTerminal($7.get(step).status));
+        const metadata = $7.derived(() => metadataItems($7.get(step)));
+        var li_1 = root_42();
+        let styles_1;
+        var div_3 = $7.child(li_1);
+        var span_2 = $7.child(div_3);
+        var node_3 = $7.child(span_2);
         {
-          let $0 = $6.derived(() => $6.get(step).progress ?? 0);
-          let $1 = $6.derived(() => $6.get(step).progressMax ?? 100);
-          let $22 = $6.derived(() => `${$6.get(step).label} progress`);
-          Progress(node_4, {
-            get value() {
-              return $6.get($0);
+          let $0 = $7.derived(() => statusDotStatus($7.get(step).status));
+          let $1 = $7.derived(() => statusLabel($7.get(step).status));
+          Status_dot(node_3, {
+            get status() {
+              return $7.get($0);
             },
-            get max() {
-              return $6.get($1);
+            get label() {
+              return $7.get($1);
             },
-            size: "sm",
-            get ariaLabel() {
-              return $6.get($22);
-            }
+            showLabel: false,
+            size: "md"
           });
         }
-        $6.reset(div_3);
-        $6.append($$anchor3, div_3);
-      };
-      var d = $6.derived(() => hasProgress($6.get(step)));
-      $6.if(node_3, ($$render) => {
-        if ($6.get(d))
-          $$render(consequent_1);
-      });
-    }
-    var node_5 = $6.sibling(node_3, 2);
-    {
-      var consequent_2 = ($$anchor3) => {
-        var dl = root_62();
-        $6.each(dl, 21, () => $6.get(metadata), (item) => item.term, ($$anchor4, item) => {
-          var div_4 = root_7();
-          var dt = $6.child(div_4);
-          var text_3 = $6.child(dt, true);
-          $6.reset(dt);
-          var dd = $6.sibling(dt, 2);
-          var text_4 = $6.child(dd, true);
-          $6.reset(dd);
-          $6.reset(div_4);
-          $6.template_effect(() => {
-            $6.set_text(text_3, $6.get(item).term);
-            $6.set_text(text_4, $6.get(item).definition);
+        $7.reset(span_2);
+        var div_4 = $7.sibling(span_2, 2);
+        var div_5 = $7.child(div_4);
+        var span_3 = $7.child(div_5);
+        var text_2 = $7.child(span_3, true);
+        $7.reset(span_3);
+        var node_4 = $7.sibling(span_3, 2);
+        {
+          var consequent_2 = ($$anchor4) => {
+            const safeLinkHref = $7.derived(() => safeStepLinkHref($7.get(step).link.href));
+            var fragment_1 = $7.comment();
+            var node_5 = $7.first_child(fragment_1);
+            {
+              var consequent_1 = ($$anchor5) => {
+                Link($$anchor5, {
+                  get href() {
+                    return $7.get(safeLinkHref);
+                  },
+                  class: "cinder-run-step-timeline__link",
+                  children: ($$anchor6, $$slotProps) => {
+                    $7.next();
+                    var text_3 = $7.text();
+                    $7.template_effect(() => $7.set_text(text_3, $7.get(step).link.label));
+                    $7.append($$anchor6, text_3);
+                  },
+                  $$slots: { default: true }
+                });
+              };
+              var alternate = ($$anchor5) => {
+                var span_4 = root_8();
+                var text_4 = $7.child(span_4, true);
+                $7.reset(span_4);
+                $7.template_effect(() => $7.set_text(text_4, $7.get(step).link.label));
+                $7.append($$anchor5, span_4);
+              };
+              $7.if(node_5, ($$render) => {
+                if ($7.get(safeLinkHref))
+                  $$render(consequent_1);
+                else
+                  $$render(alternate, -1);
+              });
+            }
+            $7.append($$anchor4, fragment_1);
+          };
+          $7.if(node_4, ($$render) => {
+            if ($7.get(step).link)
+              $$render(consequent_2);
           });
-          $6.append($$anchor4, div_4);
-        });
-        $6.reset(dl);
-        $6.append($$anchor3, dl);
-      };
-      $6.if(node_5, ($$render) => {
-        if ($6.get(metadata).length > 0)
-          $$render(consequent_2);
-      });
-    }
-    var node_6 = $6.sibling(node_5, 2);
-    {
-      var consequent_3 = ($$anchor3) => {
-        var div_5 = root_8();
-        $6.each(div_5, 21, () => $6.get(step).details, (detail) => detail.id, ($$anchor4, detail) => {
-          Collapsible($$anchor4, {
-            get trigger() {
-              return $6.get(detail).label;
+        }
+        var node_6 = $7.sibling(node_4, 2);
+        {
+          let $0 = $7.derived(() => badgeVariant($7.get(step).status));
+          let $1 = $7.derived(() => `Status: ${statusLabel($7.get(step).status)}`);
+          Badge(node_6, {
+            class: "cinder-run-step-timeline__status",
+            get variant() {
+              return $7.get($0);
+            },
+            size: "xs",
+            get "aria-label"() {
+              return $7.get($1);
             },
-            children: ($$anchor5, $$slotProps) => {
-              var pre = root_10();
-              var text_5 = $6.child(pre, true);
-              $6.reset(pre);
-              $6.template_effect(() => $6.set_text(text_5, $6.get(detail).content));
-              $6.append($$anchor5, pre);
+            children: ($$anchor4, $$slotProps) => {
+              $7.next();
+              var text_5 = $7.text();
+              $7.template_effect(($02) => $7.set_text(text_5, $02), [() => statusLabel($7.get(step).status)]);
+              $7.append($$anchor4, text_5);
             },
             $$slots: { default: true }
           });
+        }
+        var node_7 = $7.sibling(node_6, 2);
+        {
+          var consequent_3 = ($$anchor4) => {
+            Badge($$anchor4, {
+              variant: "neutral",
+              size: "xs",
+              mono: true,
+              children: ($$anchor5, $$slotProps) => {
+                $7.next();
+                var text_6 = $7.text();
+                $7.template_effect(() => $7.set_text(text_6, `attempt ${$7.get(step).attemptCount ?? ""}`));
+                $7.append($$anchor5, text_6);
+              },
+              $$slots: { default: true }
+            });
+          };
+          $7.if(node_7, ($$render) => {
+            if ($7.get(step).attemptCount !== undefined && $7.get(step).attemptCount > 1)
+              $$render(consequent_3);
+          });
+        }
+        var node_8 = $7.sibling(node_7, 2);
+        {
+          var consequent_4 = ($$anchor4) => {
+            Badge($$anchor4, {
+              variant: "neutral",
+              size: "xs",
+              mono: true,
+              children: ($$anchor5, $$slotProps) => {
+                $7.next();
+                var text_7 = $7.text();
+                $7.template_effect(($0) => $7.set_text(text_7, $0), [() => actionsCountLabel($7.get(step).actionsCount)]);
+                $7.append($$anchor5, text_7);
+              },
+              $$slots: { default: true }
+            });
+          };
+          $7.if(node_8, ($$render) => {
+            if ($7.get(step).actionsCount !== undefined && $7.get(step).actionsCount > 0)
+              $$render(consequent_4);
+          });
+        }
+        $7.reset(div_5);
+        var node_9 = $7.sibling(div_5, 2);
+        {
+          var consequent_5 = ($$anchor4) => {
+            var div_6 = root_142();
+            var node_10 = $7.child(div_6);
+            {
+              let $0 = $7.derived(() => $7.get(step).progress ?? 0);
+              let $1 = $7.derived(() => $7.get(step).progressMax ?? 100);
+              let $22 = $7.derived(() => `${$7.get(step).label} progress`);
+              Progress(node_10, {
+                get value() {
+                  return $7.get($0);
+                },
+                get max() {
+                  return $7.get($1);
+                },
+                size: "sm",
+                get ariaLabel() {
+                  return $7.get($22);
+                }
+              });
+            }
+            $7.reset(div_6);
+            $7.append($$anchor4, div_6);
+          };
+          var d = $7.derived(() => hasProgress($7.get(step)));
+          $7.if(node_9, ($$render) => {
+            if ($7.get(d))
+              $$render(consequent_5);
+          });
+        }
+        var node_11 = $7.sibling(node_9, 2);
+        {
+          var consequent_6 = ($$anchor4) => {
+            var dl = root_15();
+            $7.each(dl, 21, () => $7.get(metadata), (item) => item.term, ($$anchor5, item) => {
+              var div_7 = root_16();
+              var dt = $7.child(div_7);
+              var text_8 = $7.child(dt, true);
+              $7.reset(dt);
+              var dd = $7.sibling(dt, 2);
+              var text_9 = $7.child(dd, true);
+              $7.reset(dd);
+              $7.reset(div_7);
+              $7.template_effect(() => {
+                $7.set_text(text_8, $7.get(item).term);
+                $7.set_text(text_9, $7.get(item).definition);
+              });
+              $7.append($$anchor5, div_7);
+            });
+            $7.reset(dl);
+            $7.append($$anchor4, dl);
+          };
+          $7.if(node_11, ($$render) => {
+            if ($7.get(metadata).length > 0)
+              $$render(consequent_6);
+          });
+        }
+        var node_12 = $7.sibling(node_11, 2);
+        {
+          var consequent_7 = ($$anchor4) => {
+            var div_8 = root_17();
+            $7.each(div_8, 21, () => $7.get(step).details, (detail) => detail.id, ($$anchor5, detail) => {
+              Collapsible($$anchor5, {
+                get trigger() {
+                  return $7.get(detail).label;
+                },
+                children: ($$anchor6, $$slotProps) => {
+                  var pre = root_19();
+                  var text_10 = $7.child(pre, true);
+                  $7.reset(pre);
+                  $7.template_effect(() => $7.set_text(text_10, $7.get(detail).content));
+                  $7.append($$anchor6, pre);
+                },
+                $$slots: { default: true }
+              });
+            });
+            $7.reset(div_8);
+            $7.append($$anchor4, div_8);
+          };
+          $7.if(node_12, ($$render) => {
+            if ($7.get(step).details && $7.get(step).details.length > 0)
+              $$render(consequent_7);
+          });
+        }
+        var node_13 = $7.sibling(node_12, 2);
+        {
+          var consequent_8 = ($$anchor4) => {
+            var div_9 = root_20();
+            var node_14 = $7.child(div_9);
+            $7.snippet(node_14, () => $$props.children, () => $7.get(step));
+            $7.reset(div_9);
+            $7.append($$anchor4, div_9);
+          };
+          $7.if(node_13, ($$render) => {
+            if ($$props.children)
+              $$render(consequent_8);
+          });
+        }
+        $7.reset(div_4);
+        $7.reset(div_3);
+        $7.reset(li_1);
+        $7.template_effect(() => {
+          $7.set_attribute(li_1, "data-cinder-status", $7.get(step).status);
+          $7.set_attribute(li_1, "data-cinder-depth", $7.get(row).depth);
+          $7.set_attribute(li_1, "data-cinder-path", $7.get(row).pathKey);
+          $7.set_attribute(li_1, "data-cinder-terminal", $7.get(terminal) ? "" : undefined);
+          $7.set_attribute(li_1, "data-cinder-connector-after", $7.get(row).connectorAfter);
+          $7.set_attribute(li_1, "aria-current", $7.get(row).ariaCurrent ? "step" : undefined);
+          styles_1 = $7.set_style(li_1, "", styles_1, { "--_cinder-rst-depth": $7.get(row).depth });
+          $7.set_text(text_2, $7.get(step).label);
         });
-        $6.reset(div_5);
-        $6.append($$anchor3, div_5);
-      };
-      $6.if(node_6, ($$render) => {
-        if ($6.get(step).details && $6.get(step).details.length > 0)
-          $$render(consequent_3);
-      });
-    }
-    var node_7 = $6.sibling(node_6, 2);
-    {
-      var consequent_4 = ($$anchor3) => {
-        var div_6 = root_11();
-        var node_8 = $6.child(div_6);
-        $6.snippet(node_8, () => $$props.children, () => $6.get(step));
-        $6.reset(div_6);
-        $6.append($$anchor3, div_6);
+        $7.append($$anchor3, li_1);
       };
-      $6.if(node_7, ($$render) => {
-        if ($$props.children)
-          $$render(consequent_4);
+      $7.if(node, ($$render) => {
+        if ($7.get(row).kind === "depth-limit")
+          $$render(consequent);
+        else
+          $$render(alternate_1, -1);
       });
     }
-    $6.reset(div_1);
-    $6.reset(div);
-    $6.reset(li);
-    $6.template_effect(() => {
-      $6.set_attribute(li, "data-cinder-status", $6.get(step).status);
-      $6.set_attribute(li, "data-cinder-terminal", $6.get(terminal) ? "" : undefined);
-      $6.set_attribute(li, "data-cinder-connector-after", $6.get(isLast) ? "hidden" : "visible");
-      $6.set_attribute(li, "aria-current", $6.get(isCurrent) ? "step" : undefined);
-      $6.set_text(text3, $6.get(step).label);
-    });
-    $6.append($$anchor2, li);
+    $7.append($$anchor2, fragment);
   });
-  $6.reset(ol);
-  $6.append($$anchor, ol);
-  $6.pop();
+  $7.reset(ol);
+  $7.append($$anchor, ol);
+  $7.pop();
 }
 
 // src/components/run-step-timeline/index.ts
@@ -655,4 +1129,4 @@ export {
   Run_step_timeline as RunStepTimeline
 };
 
-//# debugId=06A6504C82D7266964756E2164756E21
+//# debugId=ACE0C2363B7D22FE64756E2164756E21