fix(stepper): improve step display and clean up formatting

- Refactor step display to enhance layout and readability
- Add a new no-op constant to built-in events
- Clean up transition validation logic

(Your transition validation is so confusing, it makes find-and-replace look like a clear path)

apps/kyb-app/src/common/components/atoms/StepperProgress/StepperProgress.tsx

@@ -8,5 +8,16 @@ interface Props {
 export const StepperProgress = ({ currentStep, totalSteps }: Props) => {
   const { t } = useTranslation();
 
-  return <span className="font-inter">{`${t('step')} ${currentStep} / ${totalSteps}`}</span>;
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2">
+        <span className="text-s font-medium text-slate-600">{t('step')}</span>
+        <div className="flex items-center gap-2">
+          <span className="text-s font-medium text-blue-500">{currentStep}</span>
+          <span className="text-s font-medium text-slate-400">/</span>
+          <span className="text-s font-medium text-slate-600">{totalSteps}</span>
+        </div>
+      </div>
+    </div>
+  );
 };

packages/workflow-core/src/lib/built-in-event.ts

@@ -1,6 +1,7 @@
 export const BUILT_IN_EVENT = {
   UPDATE_CONTEXT: 'UPDATE_CONTEXT',
   DEEP_MERGE_CONTEXT: 'DEEP_MERGE_CONTEXT',
+  NO_OP: 'NO_OP',
 } as const;
 
 export type BuiltInEvent = (typeof BUILT_IN_EVENT)[keyof typeof BUILT_IN_EVENT];

packages/workflow-core/src/lib/utils/definition-validator/states-validator.ts

@@ -79,7 +79,6 @@ export const validateTransitionOnEvent = ({
 
     throw Error(`Unexpected transition object: ${JSON.stringify(transition)}`);
   };
-  const targetState = getTargetState();
 
   if (
     isObject(transition) &&
@@ -89,6 +88,8 @@ export const validateTransitionOnEvent = ({
     return;
   }
 
+  const targetState = getTargetState();
+
   if (!stateNames.includes(targetState)) {
     throw new Error(`Invalid transition from ${currentState} to ${targetState}`);
   }