@lostgradient/cinder 0.2.0 → 0.4.0

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

@@ -0,0 +1,760 @@
+import { createRequire } from "node:module";
+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 $7 from "svelte/internal/server";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/badge/badge.svelte
+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": resolvedVariant(),
+      "data-cinder-size": size,
+      "data-cinder-mono": mono ? "" : undefined,
+      "data-cinder-subscription-state": subscriptionState,
+      ...rest
+    })}>`);
+    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>`);
+  });
+}
+
+// src/components/collapsible/collapsible.svelte
+import * as $3 from "svelte/internal/server";
+import { slide } from "svelte/transition";
+
+// src/utilities/use-reduced-motion.svelte.ts
+import * as $2 from "svelte/internal/server";
+import { MediaQuery } from "svelte/reactivity";
+function useReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return { current: false };
+  }
+  const query = new MediaQuery("(prefers-reduced-motion: reduce)", false);
+  return {
+    get current() {
+      return query.current;
+    }
+  };
+}
+
+// src/components/collapsible/collapsible.svelte
+function Collapsible($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const autoId = $3.props_id($$renderer2);
+    let {
+      trigger,
+      children,
+      open = false,
+      ontoggle,
+      disabled = false,
+      idBase,
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const SLIDE_MS = 200;
+    const motion = useReducedMotion();
+    const slideMs = $3.derived(() => motion.current ? 0 : SLIDE_MS);
+    const baseId = $3.derived(() => idBase ?? autoId);
+    const headerId = $3.derived(() => `${baseId()}-header`);
+    const panelId = $3.derived(() => `${baseId()}-panel`);
+    function handleClick() {
+      if (disabled)
+        return;
+      const next = !open;
+      open = next;
+      ontoggle?.(next);
+    }
+    $$renderer2.push(`<div${$3.attributes({
+      ...rest,
+      class: $3.clsx(classNames("cinder-collapsible", className)),
+      "data-cinder-expanded": open ? "" : undefined,
+      "data-cinder-disabled": disabled ? "" : undefined
+    })}><button type="button"${$3.attr("id", headerId())} class="cinder-collapsible__trigger"${$3.attr("aria-expanded", open)}${$3.attr("aria-controls", open ? panelId() : undefined)}${$3.attr("disabled", disabled, true)}><span class="cinder-collapsible__label">`);
+    if (typeof trigger === "string") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`${$3.escape(trigger)}`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      trigger($$renderer2, { open, disabled });
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]--></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> `);
+    if (open) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div${$3.attr("id", panelId())} role="region"${$3.attr("aria-labelledby", headerId())} class="cinder-collapsible__panel"><div class="cinder-collapsible__panel-inner">`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></div></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+    $3.bind_props($$props, { open });
+  });
+}
+
+// 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;
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/components/progress/progress.svelte
+function Progress($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      value,
+      max = 100,
+      variant = "bar",
+      size = "md",
+      label,
+      ariaLabel,
+      ariaLabelledby,
+      class: className
+    } = $$props;
+    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${$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"${$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>`);
+      }
+      $$renderer2.push(`<!--]--></svg></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$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"${$5.attr_style("", { width: `${$5.stringify(percent())}%` })}></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<div class="cinder-progress__fill cinder-progress__fill--indeterminate"></div>`);
+      }
+      $$renderer2.push(`<!--]--></div></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+
+// src/components/status-dot/status-dot.svelte
+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,
+      "aria-label": ariaLabel,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    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: $6.clsx(classNames("cinder-status-dot", className)),
+      "data-cinder-status": resolvedStatus(),
+      "data-cinder-state": connectionState,
+      "data-cinder-size": size,
+      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"${$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-->");
+    }
+    $$renderer2.push(`<!--]--></span>`);
+  });
+}
+
+// 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,
+      class: className,
+      children,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    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 "danger";
+        case "running":
+          return "online";
+        case "retrying":
+          return "warning";
+        case "waiting_approval":
+          return "accent";
+        case "cancelled":
+          return "offline";
+        case "skipped":
+          return "neutral";
+        case "pending":
+          return "pending";
+      }
+    }
+    function statusLabel(status) {
+      switch (status) {
+        case "pending":
+          return "Pending";
+        case "running":
+          return "Running";
+        case "succeeded":
+          return "Succeeded";
+        case "failed":
+          return "Failed";
+        case "cancelled":
+          return "Cancelled";
+        case "skipped":
+          return "Skipped";
+        case "retrying":
+          return "Retrying";
+        case "waiting_approval":
+          return "Waiting approval";
+      }
+    }
+    function badgeVariant(status) {
+      switch (status) {
+        case "succeeded":
+          return "success";
+        case "failed":
+          return "danger";
+        case "running":
+          return "info";
+        case "retrying":
+          return "warning";
+        case "waiting_approval":
+          return "accent";
+        case "cancelled":
+          return "neutral";
+        case "skipped":
+          return "neutral";
+        case "pending":
+          return "neutral";
+      }
+    }
+    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 && isCurrent(step.status);
+    }
+    function metadataItems(step) {
+      const items = [];
+      if (step.startTime !== undefined) {
+        items.push({ term: "Started", definition: step.startTime });
+      }
+      if (step.endTime !== undefined) {
+        items.push({ term: "Ended", definition: step.endTime });
+      }
+      if (step.duration !== undefined) {
+        items.push({ term: "Duration", definition: step.duration });
+      }
+      if (step.attemptCount !== undefined && step.attemptCount > 1) {
+        items.push({ term: "Attempts", definition: String(step.attemptCount) });
+      }
+      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(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: $7.clsx(classNames("cinder-run-step-timeline", className)),
+      "aria-label": resolvedAriaLabel(),
+      "aria-labelledby": ariaLabelledby
+    })}><!--[-->`);
+    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",
+          "aria-label": "Status: Nested child steps hidden",
+          children: ($$renderer3) => {
+            $$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-->");
+        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(`<!----></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(`<!--]--> `);
+        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(`<!---->attempt ${$7.escape(step.attemptCount)}`);
+            },
+            $$slots: { default: true }
+          });
+        } 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(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]--></ol>`);
+  });
+}
+
+// src/components/run-step-timeline/index.ts
+var run_step_timeline_default = Run_step_timeline;
+export {
+  run_step_timeline_default as default,
+  Run_step_timeline as RunStepTimeline
+};
+
+//# debugId=43AECDC458AAB71664756E2164756E21