Function StepBreadcrumbs

StepBreadcrumbs(
    __namedParameters: {
        activeIndex: number;
        className?: string;
        onStepClick?: (id: string) => void;
        steps: StepBreadcrumbItem[];
        variant?: "compact" | "hero";
    },
): Element
Horizontal step breadcrumbs shared by every multi-step surface (wizard headers, walkthrough illustrations). Presentational: the caller owns the step list and the active index.
Parameters
- __namedParameters: {
      activeIndex: number;
      className?: string;
      onStepClick?: (id: string) => void;
      steps: StepBreadcrumbItem[];
      variant?: "compact" | "hero";
  }
  - activeIndex: number
    Index of the current step; earlier steps render as done.
  - OptionalclassName?: string
  - OptionalonStepClick?: (id: string) => void
    Jump handler for completed steps (by id). Omit for a static rail.
  - steps: StepBreadcrumbItem[]
  - Optionalvariant?: "compact" | "hero"
Returns Element
Remarks
Passing onStepClick makes COMPLETED steps clickable (jump back); the active and upcoming nodes stay inert — forward jumps would skip step gating, so the controller-side goTo convention is enforced visually here too.
- Defined in ui/src/step-breadcrumbs.tsx:40